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ABOUT THE TUTORIAL 


Bootstrap Tutorial 


Twitter Bootstrap is the most popular front end frameworks currently. It is sleek, intuitive, and powerful 
mobile first front-end framework for faster and easier web development. It uses HTML, CSS and 
Javascript. 


This tutorial will teach you basics of Bootstrap Framework using which you can create web projects with 
ease. Tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap 
Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and 
useful examples. 


Audience 


This tutorial has been prepared for anyone who has a basic knowledge of HTML and CSS and has an urge 
to develop websites. After completing this tutorial you will find yourself at a moderate level of expertise 
in developing web projects using Twitter Bootstrap. 


Prerequisites 


Before you start proceeding with this tutorial, I'm making an assumption that you are already aware 
about basics of HTML and CSS. If you are not well aware of these concepts then I will suggest to go 
through our short tutorial on HTML Tutorial and CSS Tutorial. 


Copyright € Disclaimer Notice 


OAI the content and graphics on this tutorial are the property of tutorialspoint.com. Any content from 
tutorialspoint.com or this tutorial may not be redistributed or reproduced in any way, shape, or form 
without the written permission of tutorialspoint.com. Failure to do so is a violation of copyright laws. 


This tutorial may contain inaccuracies or errors and tutorialspoint provides no guarantee regarding the 
accuracy of the site or its contents including this tutorial. If you discover that the tutorialspoint.com site 
or this tutorial content contains some errors, please contact us at webmaster@tutorialspoint.com 
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Bootstrap Overview 
What is Twitter Bootstrap? 


ootstrap is a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web 


development. It uses HTML, CSS and Javascript. 


History 


Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter. lt was released as an open source product 
in August 2011 on GitHub. 


Why use Bootstrap? 


Mobile first approach: Since Bootstrap 3, the framework consists of Mobile first styles throughout the entire 
library instead of in separate files. 


Browser Support: It is supported by all popular browsers. 


oeoesc 


Easy to get started: With just the knowledge of HTML and CSS anyone can get started with Bootstrap. Also 
the Bootstrap official site has a good documentation. 

Responsive design: Bootstrap's responsive CSS adjusts to Desktops,Tablets and Mobiles. More about 
responsive design in the chapter Bootstrap Responsive Design 
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e Provides a clean and uniform solution for building an interface for developers. 
e |t contains beautiful and functional built-in components which are easy to customize. 
e  ltalso provides web based customization. 


e And best of all it is an open source. 


What Bootstrap Package Includes? 


e Scaffolding: Bootstrap provides a basic structure with Grid System, link styles, background. This is is 
covered in detail in the section Bootstrap Basic Structure 

e CSS: Bootstrap comes with feature of global CSS settings, fundamental HTML elements styled and 
enhanced with extensible classes, and an advanced grid system. This is covered in detail in the 
section Bootstrap with CSS. 

e Components: Bootstrap contains over a dozen reusable components built to provide iconography, 
dropdowns, navigation, alerts, popovers, and much more. This is covered in detail in the section Layout 
Components. 

e JavaScript Plugins: Bootstrap contains over a dozen custom jQuery plugins. You can easily include them 
all, or one by one. This is covered in details in the section Bootstrap Plugins. 

e Customize: You can customize Bootstrap's components, LESS variables, and jQuery plugins to get your 
very own version. 
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Bootstrap Environment Setup 


t is very easy to setup and start using Bootstrap. This chapter will explain how to download and setup 
Bootstrap. lt will also discuss the Bootstrap file structure, and demonstrate its usage with an example. 


Download Bootstrap 


You can download the latest version of Bootstrap from http://getbootstrap.com/. When you click on this link, you 
will get to see a screen as below: 


Boots 


Sek. intuitive, and | irst front 


trap 


Download Bootstrap Download source 


Here you can see two buttons: 


e Download Bootstrap: Clicking this, you can download the precompiled and minified versions of Bootstrap 
CSS, JavaScript, and fonts. No documentation or original source code files are included. 

e Download Source: Clicking this, you can get the latest Bootstrap LESS and JavaScript source code directly 
from GitHub. 

If you work with Bootstrap's uncompiled source code, you need to compile the LESS files to produce usable CSS 

files. For compiling LESS files into CSS, Bootstrap officially supports onlyRecess , which is Twitter's CSS hinter 

based on less. js. 


For better understanding and ease of use, we shall use precompiled version of Bootstrap throughout the tutorial . 
As the files are complied and minified you don't have to bother every time including separate files for individual 
functionality. At the time of writing this tutorial the latest version (Bootstrap 3) was downloaded. 
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File structure 
PRECOMPILED BOOTSTRAP 


Once the compiled version Bootstrap is downloaded, extract the ZIP file, and you will see the following 
file/directory structure: 


b strap 
bootstrap.min.c 

I— bootstrap-th S 

L— bootstrap-theme.min 

— bootstrap.]j 

\— bootstrap.min 

— fonts/ 

giyphicons-halflings-regular.e 

- glyphicons-halflings-regular.svg 

I— glyphicons-halflings-regular.ttf 


- glyphicons-halflings-regular .woff 


As you can see there are compiled CSS and JS (bootstrap.*), as well as compiled and minified CSS and JS 
(bootstrap.min.*). Fonts from Glyphicons are included, as is the optional Bootstrap theme. 


BOOTSTRAP SOURCE CODE 


If you downloaded the Bootstrap source code then the file structure would be as follows: 


less/ 
— js/ 
fonts/ 
— dist/ 
| css/ 
- js/ 
fonts/ 


docs-assets/ 
— examples/ 
L— * html 


e The files under /ess/, js/, and fonts/are the source code for Bootstrap CSS, JS, and icon fonts (respectively). 
e The dist/folder includes everything listed in the precompiled download section above. 
e  docs-assets/, examples/, and all *.html files are Bootstrap documentation. 


HTML Template 


A basic HTML template using Bootstrap would look like as this: 


< IDOE, lates > 
<html> 
<head> 
<title>Bootstrap 101 Template</title> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<lo= Oeste ==> 
<link href="css/bootstrap.min.css" rel="stylesheet"> 


«!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media 
queries --> 
<!-- WARNING: Respond.js doesn't work if you view the page 
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via file:// --> 
<l== [568 Mie is, 9]> 
«script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/ 
asas, ya S</S@rel ies 
<script src-"https://oss.maxcdn.com/libs/respond.js/1.3.0/ 
respond.min.js"></script> 
Ie] ==> 
</head> 
<body> 
<hl>Hello, world!</h1> 


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="https://code.jquery.com/jquery.js"></script> 
<!-- Include all compiled plugins (below), or include individual files 


as needed --> 
<script src="js/bootstrap.min.js"></script> 
</body> 
</html> 


Here you can see the jquery.js and bootstrap.min.js and bootstrap.min.css files are included to make a normal 
HTM file to Bootstrapped Template. 


More details about each of the elements in this above piece of code will be discussed in the chapterBootstrap CSS 
Overview. 

This template structure is already included as part of the Try it tool. Hence in all the examples (in the following 
chapters) of this tutorial you shall only see the contents of the <body> element. Once you click on the Try it option 
available at the top right corner of example, you will see the entire code. 


Example 


Now let's try an example using the above template. Try following example using Try it option available at the top 
right corner of the below sample code box: 


<hl>Hello, world!</h1> 


In all the subsequent chapters we have used dummy text from the site http://www. lipsum.com/. 
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Bootstrap Grid System 


n this chapter we shall discuss the Bootstrap Grid System. 


What is a Grid? 


As put by wikepedia: 

In graphic design, a grid is a structure (usually two-dimensional) made up of a series of intersecting straight 
(vertical, horizontal) lines used to structure content. It is widely used to design layout and content structure in print 
design. In web design, itis a very effective method to create a consistent layout rapidly and effectively using HTML 
and CSS. 


To put it simple words grids in web design organise and structure content, makes websites easy to scan and 
reduces cognitive load on users. 


What is Bootstrap Grid System? 


As put by the official documentation of Bootstrap for grid system: 


Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the 
device or viewport size increases. lt includes predefined classes for easy layout options, as well as powerful mixins 
for generating more semantic layouts. 

Let us understand the above statement. Bootstrap 3 is mobile first in the sense that the code for Bootstrap now 


starts by targeting smaller screens like mobile devices,tablets, and then “expands” components and grids for larger 
screens such as laptops, desktops. 


MOBILE FIRST STRATEGY 


e Content 
o Determine what is most important. 
e Layout 


o Design to smaller widths first. 
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o Base CSS address mobile device first;media queries address for tablet,desktops. 


e Progressive Enhancement 


o Add elements as screen size increases. 


Working of Bootstrap Grid System 


Grid systems are used for creating page layouts through a series of rows and columns that house your content. 
Here's how the Bootstrap grid system works: 


e Rows must be placed within a .container class for proper alignment and padding. 
e Use rows to create horizontal groups of columns. 
e Content should be placed within columns, and only columns may be immediate children of rows. 


e  Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. LESS mixins can 
also be used for more semantic layouts. 


e Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first 
and last column via negative margin on .rows. 


e Grid columns are created by specifying the number of twelve available columns you wish to span. For 
example, three equal columns would use three .col-xs-4. 


Media Queries 


Media query is a really fancy term for "conditional CSS rule". It simply applies some CSS based on certain 
conditions set forth. If those conditions are met, the style is applied. 


Media Queries in Bootstrap allow you to move, show and hide content based on viewport size. Following media 
queries are used in LESS files to create the key breakpoints in the Bootstrap grid system. 


/* Extra small devices (phones, less than 768px) */ 
/* No media query since this is the default in Bootstrap */ 


/* Small devices (tablets, 768px and up) */ 
(media (min-width: @screen-sm-min) { ... ) 


/* Medium devices (desktops, 992px and up) */ 
(media (min-width: Gscreen-md-min) { ... ) 


/* Large devices (large desktops, 1200px and up) */ 
(media (min-width: @screen-lg-min) { ... } 


Occasionally these are expanded to include a max-width to limit CSS to a narrower set of devices. 


@media (max-width: @screen-xs-max) { Eet 

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } 

@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } 
( ) al 


@media 


} 


min-width: @screen-lg-min 


Media queries have two parts, a device specification and then a size rule. In the above case, the following rule is 
set: 


Lets consider this line: 


Qmedia (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } 
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For all devices no matter what kind with min-width: @screen-sm-min H the width of the screen gets smaller 


than @screen-sm-max, then do something. 


Grid options 


The following table summarizes aspects of how Bootstrap grid system works across multiple devices: 


Extra small devices 


Phones (<768px) 


Small devices Tablets 
(2768px) 


Collapsed to start, 


Medium devices 
Desktops (2992px) 


Collapsed to start, 


SE EN zell horizontal above horizontal above 
breakpoints breakpoints 

Max 

container None (auto) 750px 970px 

width 

Class prefix .col-xs- .col-sm- .col-md- 

# of columns 12 12 12 

esu Auto 60px 78px 

width P P 
30px 30px 30px 

Gutter width (15px on each side (15px on each side ofa (15px on each side of a 
of a column) column) column) 

Nestable Yes Yes Yes 

Offsets Yes Yes Yes 

Column Yes Yes Yes 

ordering 


BASIC GRID STRUCTURE 


Following is basic structure of Bootstrap grid: 


<div class="container"> 
<div class="row"> 

«elits. class etel she oli 

<div class-"col-*-*"»«/div» 


«/div» 


«div class="row">...</div> 


«/div» 


<div class="container">.... 


Let us see some simple grid examples: 


e Example: Stacked-to-horizontal 


e Example: Medium and Large Device 
e Example: Mobile, tablet, desktops 


Bootstrap Grid System Example: Stacked-to-horizontal 


Large devices 
Desktops (21200px) 


Collapsed to start, 


horizontal above 
breakpoints 


1170px 


.col-Ig- 


12 


95px 


30px 

(15px on each side of a 
column) 

Yes 


Yes 


Yes 


Let us see a simple grid example with simple layout: two columns, two paragraphs per column. (Here styling for 


each column is used. You can avoid it.) 


TUTORIALS POINT 
Simply Easy Learning 


<div class="container"> 
<hl>Hello, world!</h1> 


<div class="row"> 


<div class-"col-md-6"  style-"background-color: #dedef8; box-shadow: 
inset lpx -1px lpx #444, inset -lpx lpx lpx #444;"> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
enim ad minim veniam, quis nostrud exercitation ullamco laboris 
nisi ut aliquip ex ea commodo consequat. 
</p> 


<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
quae ab illo inventore veritatis et quasi architecto beatae vita 
dicta sunt explicabo. 
</p> 
</div> 


<div class="col-md-6" style="background-color: #dedef8;box-shadow: 
inset lpx -1px lpx #444, inset -lpx lpx lpx #444;"> 
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
accusantium doloremque laudantium. 
</p> 


<p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, 
consectetur, adipisci velit, sed quia non numquam eius modi 
tempora incidunt ut labore et dolore magnam aliquam quaerat 


voluptatem. 
</p> 
</div> 
</div> 
Hello, world! 
Lorem psum dolor sf amal, corsacehr adpescihg ell. sad do eusmod tempor Sed ut perspiciatis unde omnis ite nalus error së voluptatem accusantum doloremque 
incididunt ut labore et dolore magna aliqua. Ut enim ad mimm veniam, qus nostrud Qudantum 


exerciation ulamco bors nisi ut alquip ex ea commodo consequat 
Neque porro quisquam est, qui dolorem ipsum quia dolor sf amet, contedor., adpeo 


Sed ut perspiciatis unde omnis iste natus emor st voluptatem accusardum doloremque velt, sed quia non numquam elus modi tempora ncidurt ut labore et dolore magram 
leudantum, totam rem aperiam, cague psa quae ab iio ieventore veritais et quas auam quaerat voluptatem 
mchlecio bestas viae dicts sunt explicsioo 


Details 


e <div class="container">...</div> element is added to ensure proper centering and maximum width for 
layout. 


e Once container is added, next you need think in terms of rows. Add «div class="row">...</div>and 
columns «div class="col-md-6"></div> inside rows. 


e Every row in the grid is made up of 12 units and you can define the desired size of your columns using those 
units. In our example we have two columns each made of 6 units wide i.e 646212. 


You can try some more options like «div class="col-md-3"></div> and «div class="col-md-9"></div>or <div 
class="col-md-7"></div> and «div class="col-md-5"></div> 


Experiment and make sure that the sum always needs to be 12. 


Bootstrap Grid System Example: Medium and Large Device 


We have seen the basic grid system in Example: Stacked-to-horizontal. Here we had used 2 divs and gave them 
the 50%/50% split at the medium viewport width: 
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<div, cllasis="icoll—mod— o> S Cave 
<div elass die bm cies AS EE e 


But at large your design could really be better as a 3396/6696. So what we're going to do is set it up to change the 


column widths at the breakpoint: 


«div class-"col-md-6 col-1g-4">....</div> 
«div class-"col-md-6 col-lg-4">....</div> 


Now Bootstrap is going to say “at the medium size, | look at classes with md in them and use those. At the large 
size, | look at classes with the word Ig in them and use those. In this case, our 2 divs will go from a 5096/5095 split 
and then up to a 3395/6696. Check it out in the following example. (Here styling for each column is used. You can 


avoid it.) 


«div class="container"> 
<hl>Hello, world!</h1> 


<div class="row"> 


<div class-"col-md-6 col-1g-4"  style-"background-color: #dedef8; 
box-shadow: inset lpx -lpx 1px #444, inset -lpx 1px lpx +444;"> 
Xp»Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
enim ad minim veniam, quis nostrud exercitation ullamco laboris 
nisi ut aliquip ex ea commodo consequat. 
</p> 


<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
quae ab illo inventore veritatis et quasi architecto beatae vita 


dicta sunt explicabo. 
</p> 
</div> 


<div class="col-md-6 col-lg-8"" style="background-color: #dedef8; 
box-shadow: inset lpx -lpx lpx #444, inset -lpx lpx lpx #444; "> 
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
accusantium doloremque laudantium. 
</p> 


<p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, 
consectetur, adipisci velit, sed quia non numquam eius modi 
tempora incidunt ut labore et dolore magnam aliquam quaerat 
voluptatem. 
</p> 
</div> 
</div> 


Hello, world! 


Lorem ipsom dolor sl amel consectetur adpecrg oft Sed yl perspacialis unde omnis iste malus error sl voluptatem acoseantum doloreque inudantum 
sed do eusmod tempor ncididunt ut labore et dolore 
magra aliqua. Ut enim ad mirim veniam. qus nostrud 
exrcimos ullamco meng nai ut wiqup ex ea 
commodo consequat. 


Eug modi tempora incdunt ut labore et dolore magnam aliquam quaerat voluptatem 


Sed ut perspiaate unde omnis iste naiue error sl 

voluptatem aocusanhium doloremque laudantium, totam 

rem aperiam, eaque ipea quae ab So invectore vertats 
| el quasi scheck: beatae vitae deta sunt explicabo 
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Neque porro quisquam est, qui dolorem ipsum quia dolor së amal, consectur, adipisci velit, sed quis non numquam 


Bootstrap Grid System Example: Mobile, Tablet, Desktops 


We have seen an example for Medium and Large Device. Now let us take it to another level, where we would want 
to change it for the extra small phone size as well. Say we want to add the option for the columns to be split 


25%/75% for tablets, we go like this: 


<chiy class="col==1mesS glue. eher a a 
<div class-"col-sm-9 col-md-6 col-lg-8">....</div> 


Now this gives us 3 different column layouts at each point. On a phone, it will be 25% on the left, and 75% on the 
right. On a tablet, it will be 50%/50% again, and on a large viewport, it will be 33%/66%. 3 different layouts for each 
of the 3 responsive sizes. Check it out in the following example. (Here styling for each column is used. You can 


avoid it.) 


<div class="container"> 
<hl>Hello, world!</h1> 


<div class="row"> 


«div class-"col-sm-3 col-md-6 col-Llg-8" 

style-"background-color: #dedef8; 

box-shadow: inset lpx -lpx lpx #444, 

inset -lpx lpx lpx #444;"> 

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
enim ad minim veniam, quis nostrud exercitation ullamco laboris 
nisi ut aliquip ex ea commodo consequat. 

</p> 


<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
quae ab illo inventore veritatis et quasi architecto beatae vita 
dicta sunt explicabo. 
</p> 
</div> 


<div class="col-sm-9 col-md-6 col-1g-4" 
style="background-color: #dedef8; 
box-shadow: inset lpx -lpx lpx #444, 
inset -lpx lpx lpx #444;"> 
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
accusantium doloremque laudantium. 
</p> 


<p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, 
consectetur, adipisci velit, sed quia non numquam eius modi 
tempora incidunt ut labore et dolore magnam aliquam quaerat 


voluptatem. 
</p> 
</div> 
</div> 

Hello, world! 

Lorem ipsum dolor sit amet, consectetur adeeicng eft, sed do eismod tempor iocfadunt ut labore et dolore magna Sed ut perspicue unde omnis sn amnis error sit 
aqua. Ut enim ad mim venim. quis nostrud exercinbon ubico laboris nist ut alque ex es commodo consequat woluptsterm sccusarmum doloremque lauds 
Sed ut perspicats unde omnes isie nimus ertor sk voluptem accusantium doloremque laudantum, otim rem Neq poro quisquam est, qai dolorem ipsum quae 


aperam, esque ipsa quar ab ilio invertore vertats et quas architecto beatae viae dictn sunt explicabo dolor st amet, consectetur, adipesci velit, sed quia non 
> —] numquam eius modi tempora incidunt «t labore et dolore 
| magam akquam quaere voluptem 
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Responsive column resets 


With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns 
don't clear quite right as one is taller than the other. To fix that, use a combination of a class.clearfix and 
the responsive utility classes as shown in the following example: 


<div class="container"> 
<div class="row" > 
<div class="col-xs-6 col-sm-3" 
style="background-color: #dedef8; 
box-shadow: inset lpx -lpx lpx #444, inset -lpx lpx lpx +444;"> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
«Palo 
<div class="col-xs-6 col-sm-3" 
style="background-color: #dedef8;box-shadow: 
inset lpx -lpx lpx #444, inset -lpx lpx lpx #444;"> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
enim ad minim veniam, quis nostrud exercitation ullamco laboris 
nisi ut aliquip ex ea commodo consequat. 
</p> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut. 
</p> 
</div> 


<div class="clearfix visible-xs"></div> 


«div class-"col-xs-6 col-sm-3" 
style-"background-color: #dedef8; 
box-shadow:inset lpx -lpx 1px #444, inset -lpx lpx lpx #444;"> 
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea commodo consequat. 
</p> 
</div> 
<div class="col-xs-6 col-sm-3" 
style="background-color: #dedef8;box-shadow: 
inset lpx -lpx lpx #444, inset -lpx lpx lpx #444;"> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
enim ad minim 
</p> 
</div> 
</div> 
</div> 


Resize your viewport or check it out on your phone for a desired result of this example. 


Offset columns 


Offsets are a useful feature for more specialized layouts. They can be used to push columns over for more 
spacing, for example. The .col-xs=* classes don’t support offsets, but they are easily replicated by using an empty 


cell. 
To use offsets on large displays, use the .col-md-offset-* classes. These classes increase the left margin of a 


column by * columns where * range from 1 to 11. 
In the following example we have <div class="col-md-6">..</div>, we will center this using class .col-md-offset-3. 


<div class="container"> 


<hl>Hello, world!</h1> 
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<div class="row" > 

<div class="col-xs-6 col-md-offset-3" 
style="background-color: #dedef8;box-shadow: 
inset lpx -lpx lpx #444, inset -lpx lpx lpx #444;"> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 

elit. 

</p> 

</div> 


</div> 
</div> 


Hello, world! 


Lorem ipsum dolor si amet. consecletur adipisicing elf. 


Nesting columns 


To nest your content with the default grid, add a new .row and set of .col-md-* columns within an existing .col- 
md-* column. Nested rows should include a set of columns that add up to 12. 


In the following example, the layout has two columns, with the second one being split into four boxes over two 
rows. 


<div class="container"> 
<hl>Hello, world!</h1> 


<div class="row"> 


<div class="col-md-3" style="background-color: #dedef8;box-shadow: 
inset lpx -lpx lpx #444, inset -lpx lpx lpx #444;"> 
<h4>First Column</h4> 


<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
</div> 


<div class="col-md-9" style="background-color: #dedef8;box-shadow: 
inset lpx -lpx lpx #444, inset -lpx lpx lpx #444;"> 
<h4>Second Column- Split into 4 boxes</h4> 
<div class="row"> 
<div class="col-md-6" style="background-color: #B18904; 
box-shadow: inset lpx -lpx lpx #444, inset -lpx lpx lpx #444; "> 
<p>Consectetur art party Tonx culpa semiotics. Pinterest 
assumenda minim organic quis. 
</p> 
</div> 
<div class="col-md-6" style="background-color: #B18904; 
box-shadow: inset lpx -lpx lpx #444, inset -lpx lpx lpx #444;"> 
<p> sed do eiusmod tempor incididunt ut labore et dolore magna 
aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
ullamco laboris nisi ut aliquip ex ea commodo consequat. 
</p> 
</div> 
</div> 


<div class="row"> 
<div class-"col-md-6" style="background-color: #B18904; 
box-shadow: inset lpx -lpx lpx #444, inset -lpx lpx lpx #444; "> 
<p>quis nostrud exercitation ullamco laboris nisi ut 
aliquip ex ea commodo consequat. 
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</p> 
</div> 
<div class="col-md-6" style="background-color: #B18904; 
box-shadow: inset lpx -lpx lpx #444, inset -lpx lpx lpx #444;"> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna 
aliqua. Ut enim ad minim.</p> 
</div> 
<div> 


</div> 
</div> 


</div> 


Hello, world! 


Second Column- Spit into 4 boxes 


Column ordering 


Another nice feature of Bootstrap grid system is that you can easily write the columns in an order, and show them 
in another one. You can easily change the order of built-in grid columns with .col-md-push-* and .col-md-pull- 
* modifier classes where * range from 1 to 11. 

In the following example we have two-columns layout with left column being the narrowest and acting as sidebar. 
We will swap the order of these columns using .col-md-push-* and .col-md-pull-* classes. 


<div class="container"> 
<hl>Hello, world!</h1> 


<div class="row"> 
<p>Before Ordering</p> 
<div class="col-md-4" style="background-color: #dedef8; 
box-shadow: inset lpx -lpx lpx #444, inset -lpx lpx lpx +444;"> 
I am on left 
er» 
<div class-"col-md-8" style-"background-color: #dedef8; 
box-shadow: inset lpx -lpx 1px #444, inset -lpx 1px lpx +444;"> 
I am on right 
«/div» 
</div><br> 
<div class="row"> 
<p>After Ordering</p> 
<div class="col-md-4 col-md-push-8" 
style="background-color: #dedef8; 
box-shadow: inset lpx -lpx lpx #444, 
inset -lpx lpx lpx #444;"> 
I was on left 
e ry 
<div class-"col-md-8 col-md-pull-4" 
style-"background-color: #dedef8; 
box-shadow: inset lpx -lpx lpx #444, 
inset -lpx lpx lpx #444;"> 
I was on right 
</div> 
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ST 
</div> 


Hello, world! 
Before Ordering 
[iam onw T fam on right 
Alter Ordering 


l waa om md I | aa on wb 
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Bootstrap CSS Overview 


n this chapter we will see an overview of the key pieces of Bootstrap's infrastructure, including Bootstrap's 


approach to better, faster, stronger web development. 


HTML5 doctype 


Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. 
Hence include the below piece of code for HTML5 doctype at the beginning of all your projects using Bootstrap. 


BIEL item 
<html> 


mente 
Mobile First 


Since Bootstrap 3, Bootstrap has become mobile first. lt means mobile first styles can be found throughout the 
entire library instead of in separate files. You need to add the viewport meta tag to the<head> element, to ensure 
proper rendering and touch zooming on mobile devices. 


«meta name-"viewport" content="width=device-width, initial-scale=1.0"> 


e width property controls the width of the device. Setting it to device-width will make sure that it is rendered 
across various devices (mobiles,desktops,tablets...) properly. 

e initial-scale-1.0 ensures that when loaded, your web page will be rendered at a 1:1 scale, and no zooming will 
be applied out of the box. 


Add user-scalable=no to the content attribute to disable zooming capabilities on mobile devices as shown below. 
Users are only able to scroll and not zoom with this change, and results in your site feeling a bit more like a native 
application. 


«meta name-"viewport" content="width=device-width, 
initial-scale-1.0, 
maximum-scale-1.0, 
user-scalable=no"> 


Normally maximum-scale=1.0 is used along with user-scalable=no. As mentioned above user-scalable=no may 
give users an experience more like a native app, hence Bootstrap doesn't recommend using this attribute. 
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Responsive images 


Bootstrap 3 allows to make the images responsive by adding a class .img-responsive to the <img>tag. This class 
applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element. 


<img src="..." class="img-responsive" alt="Responsive image"> 


Typography and links 
Bootstrap sets a basic global display (background), typography, and link styles: 


e Basic Global display: Sets background-color: #fff; on the <body> element. 

e Typography: Uses the @font-family-base, @font-size-base, and @line-height-base attributes as the 
typographic base 

e Link styles: Sets the global link color via attribute @link-color and apply link underlines only on:hover. 
If you intend to use LESS code, you may find all these within scaffolding.less. 


Normalize 
Bootstrap uses Normalize to establish cross browser consistency. 


Normalize.css is a modern, HTML5-ready alternative to CSS resets. It is a small CSS file that provides better 
cross-browser consistency in the default styling of HTML elements. 


Containers 

Use class .container to wrap a page's content and easily center the content's as shown below. 
<div class="container"> 
E 

Take a look at the .container class in bootstrap.css file: 


Container { 
jpevelebuae;-sesesqe 3 di5rxp 
padding ege o IS 
margin-right: auto; 
margin-left: auto; 

} 


Note that, due to padding and fixed widths, containers are not nestable by default. 


Take a look at bootstrap.css file: 
@media (min-width: 768px) { 
Container { 
width: 750px; 
} 


Here you can see that CSS has media-queries for containers with width. This helps for applying responsiveness 
and within those the container class is modified accordingly to render the grid system properly. 
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Bootstrap Typography 


ootstrap uses Helvetica Neue, Helvetica, Arial, and sans-serif in its default font stack. Using typography 


feature of Bootstrap you can create headings, paragraphs, lists and other inline elements. Let see each one these 
in the following sections: 


Headings 


All HTML headings (h1 to h6) are styled in Bootstrap. An example is as shown below: 


<hl>I'm 
<h2>I'm 
<h3>I'm 
<h4>1'm 
ht Ste 
«h6»I'm 


Headingl 
Heading2 
Heading3 
Heading4 
Heading5 
Heading6 


h1</h1> 
h2«/h2» 
h3«/h3» 
h4«/h4» 
h5«/h5» 
h6</h6> 


Above code segment with Bootstrap will produce following result: 


I'm Heading1 bi 


I'm Heading2 h2 


I'm Heading3 h3 


I'm Heading4 h4 


I'm Heading5 h5 
I'm Heading6 h6 


INLINE SUBHEADINGS 


To add an inline subheading to any of the headings, simply add <small> around any of the elements or 
add .small class and you will get smaller text in a lighter color as shown in the example below: 


<hl>I'm Headingl hl. «small»I'm secondary Headingl h1</smal1></h1> 
<h2>I'm Heading2 h2. <small>I'm secondary Heading2 h2</small></h2> 
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<h3>I'm Heading3 h3. <small>I'm secondary Heading3 h3</small></h3> 
<h4>I'm Heading4 h4. <small>I'm secondary Heading4 h4</small></h4> 
<h5>I'm Heading5 h5. <small>I'm secondary Heading5 h5</small></h5> 
<h6>I'm Heading6 h6. <small>I'm secondary Headingl h6</small></h6> 


Above code segment with Bootstrap will produce following result: 


I'm Heading1 h1. im secondary Heading1 h1 
I'm Heading2 h2. i'm secondary Heading2 h2 


I'm Heading3 h3. im secondary Headings 
I'm Heading4 h4. l'm secondary Headings h4 


I'm HeadingS5 h5. i'm se y t 
l'm Heading6 h6. 


Lead Body Copy 


To add some emphasis to a paragraph, add class="lead". This will give you larger font size, lighter weight, and a 
taller line height as in the following example: 


<h2>Lead Example</h2> 

<p class="lead">This is an example paragraph demonstrating the use of lead body 
copy. This is an example paragraph demonstrating the use of lead body copy.This is 
an example paragraph demonstrating the use of lead body copy.This is an example 
paragraph demonstrating the use of lead body copy.This is an example paragraph 
demonstrating the use of lead body copy.</p> 


Lead Example 


This is an example paragraph demonstrating the use of lead body copy. This is an example 
paragraph demonstrating the use of lead body copy.This is an example paragraph demonstrating 
the use of lead body copy.This is an example paragraph demonstrating the use of lead body 
copy.This is an example paragraph demonstrating the use of lead body copy. 


Emphasis 


HTML's default emphasis tags such as <<small> (sets text at 85% the size of the parent), <strong> emphasizes a 
text with heavier font-weight, <em> emphasizes a text in italics. 


Bootstrap offers a few classes that can be used to provide emphasis on texts as seen in the following example: 


<small>This content is within <small> tag</small><br> 

<strong>This content is within <strong> tag</strong><br> 

<em>This content is within <em> tag and is rendered as italics</em><br> 
<p class="text-left">Left aligned text.</p> 

<p class="text-center">Center aligned text.</p> 

<p class="text-right">Right aligned text.</p> 

<p class="text-muted">This content is muted</p> 

<p class="text-primary">This content carries a warning class</p> 

<p class="text-success">This content carries a success class</p> 
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<p class="text-info">This content carries a info class</p> 
<p class="text-warning">This content carries a warning class</p> 
<p class="text-danger">This content carries a danger class</p> 
This content is within <small> tag 
This content is within <strong> tag 
This content is within <em> tag and is rendered as italics 
Left aligned text 


Center aligned text 


Right aligned text 


This content carries a warning class 
This content carries a success class 
This content carries a info class 
mier ames a wa ( as! 
This content carries a danger class 
Abbreviations 
t 


The HTML element provides markup for abbreviations or acronyms, like WWW or HTTP. Bootstrap styles <abbr> 
elements with a light dotted border along the bottom and reveals the full text on hover (as long as you add that text 
to the <abbr> title attribute). To get a a slightly smaller font size Add .initialism to <abbr>. 


<abbr title="World Wide Web">WWW</abbr><br> 
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr> 


WWW 

RSS 
Addresses 
Using <address> tag you can display the contact information on your web page. Since the <address> defaults to 
display:block; you'll need to use 


tags to add line breaks to the enclosed address text. 


«address» 

<strong>Some Company, Inc.</strong><br> 

007 street<br> 

Some City, State XXXXX<br> 

<abbr title="Phone">P:</abbr> (123) 456-7890 
</address> 


<address> 

<strong>Full Name</strong><br> 

<a href="mailto: #">mailto@somedomain.com</a> 
</address> 
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Some Company, Inc. 
007 street 

Some City, State XXXXX 
P: (123) 456-7890 


Full Name 
mailtto@somedomain.com 
Blockquotes 


You can use the default <blockquote> around any HTML text. Other options include, adding a <small> tag for 
identifying the source of the quote and right-aligning the blockquote using class .pull-right. The following example 
demonstrates all these features: 


<blockquote><p> 

This is a default blockquote example. This is a default blockquote example. This is 
a default blockquote example.This is a default blockquote example. This is a 
default blockquote example.</p></blockquote> 

<blockquote>This is a blockquote with a source title.<small>Someone famous in <cite 
title-"Source Title">Source Title</cite></small></blockquote> 

<blockquote class="pull-right">This is a blockquote aligned to the 
right.<small>Someone famous in <cite title="Source Title">Source 
Title</cite></small></blockquote> 


Example of Blockquote 


This is a default blockquote example. This is a default blockquote example. This is a default 
blockquote example. This is a default blockquote example. This is a default blockquote 
example. 


This is a blockquote with a source title 


This is a blockquote aligned to the nght 


Lists 


Bootstrap supports ordered lists, unordered lists, and definition lists. 


Ordered lists: An ordered list is a list that falls in some sort of sequential order and is prefaced by numbers. 
Unordered lists: An unordered list is a list that doesn’t have any particular order and is traditionally styled with 
bullets. If you do not want the bullets to appear then you can remove the styling by using the class ./ist- 
unstyled. You can also place all list items on a single line using the class ./ist-inline. 

e Definition lists: In this type of list, each list item can consist of both the <dt> and the <dd> elements. <dt> 
stands for definition term, and like a dictionary, this is the term (or phrase) that is being defined. Subsequently, 
the <dd> is the definition of the <dt>. 

You can make terms and descriptions in <dl> line up side-by-side using class dl-horizontal. 


The following example demonstrates each of these types: 
<h4>Example of Ordered List</h4> 


«ol 
«li»Item 1«/li» 
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<li>Item 2«/li» 
<li>Item 3«/li» 
<li>Item 4«/li» 
</ol> 
<h4>Example of UnOrdered List</h4> 
<ul> 
«li»Item 1x/li» 
<li>Item 2«/li» 
<li>Item 3«/li» 
«li»Item 4«/li» 
«ul 
<h4>Example of Unstyled List</h4> 
<ul class="list-unstyled"> 
<li>Item 1«/li» 
<li>Item 2</1i> 
<li>Item 3</1i> 
<li>Item 4«/li» 


<h4>Example of Inline List</h4> 
<ul class="list-inline"> 
«li»Item 1</1i> 
«li»Item 2</1i> 
<li>Item 3</1i> 
<li>Item 4</1i> 
</ul> 
<h4>Example of Definition List</h4> 
<dl> 
<dt>Description 1</dt> 
<dd>Item 1</dd> 
<dt>Description 2</dt> 
<dd>Item 2</dd> 
ed 
<h4>Example of Horizontal Definition List</h4> 
«dl class="dl-horizontal"> 
«dt»Description 1</dt> 
<dd>Item 1</dd> 
<dt>Description 2</dt> 
«dd»Item 2«/dd» 
«fdli- 
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Example of Ordered List 


1. Item 1 
2. Item 2 
3. Item 3 
4. Item 4 


Example of UnOrdered List 


e Item 1 
e Hem 2 
e Wem 3 
e Item 4 


Example of Unstyled List 


Item 1 
Item 2 
Item 3 
Item 4 


Example of Inline List 
Item 1 item2 Hem 3 Wem 4 


Example of Definition List 
Description 1 
ltem 1 


Description 2 
Item 2 


Example of Horizontal Definition List 


Description 1 ftemi 
Description 2 item 2 


TUTORIALS POINT 
Simply Easy Learning 


Bootstrap Code 


ootstrap allows you to display code with two different key ways: 


e The first is the <code> tag. If you are going to be displaying code inline, you should use the <code> tag. 


e Second is the <pre> tag. If the code needs to be displayed as a standalone block element or if it has multiple 
lines, then you should use the <pre> tag. 


Make sure that when you use the <pre> and <code> tags, you use the unicode variants for the opening and 
closing tags: &lt; and &gt;. 


Let us see an example below: 


<p><code>&lt;header&gt;</code> is wrapped as an inline element.</p> 
<p>To display code as a standalone block element use &lt;pre&gt; tag as: 
«pre» 
&lt;article&gt; 
&lt;hl&gt;Article Heading&lt;/hl&gt; 
&lt;/articlesgt; 
«/pre» 


«header» is wrapped as an inline element 


To display code as a standalone block element use «pre» tag as: 


«article» 
«hi»Article Heading</h1> 
</artícle> 
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Bootstrap Tables 


ootstrap provides a clean layout for building tables. Some of the table elements supported by Bootstrap 


are: 
Tag Description 
<table> Wrapping element for displaying data in a tabular format 
<thead> Container element for table header rows (<tr>) to label table columns 
<tbody> Container element for table rows (<tr>) in the body of the table 
<tr> Container element for a set of table cells (<td> or <th>) that appears on a single row 
<td> Default table cell 


ene Special table cell for column (or row, depending on scope and placement) labels. Must be used within a 
<thead> 


<caption> Description or summary of what the table holds. 


Basic Table 


If you want a nice, basic table style with just some light padding and horizontal dividers, add the base class 
of .table to any table as shown in the following example: 


<table class="table"> 
<caption>Basic Table Layout</caption> 
<thead> 
<LI> 
<th>Name</th> 
<th>City</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>Tanmay</td> 
<td>Bangalore</td> 
EE 
<tr> 
<td>Sachin</td> 
<td>Mumbai</td> 
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</tr> 


</tbody> 
</table> 
Basic Table Layout 
Name City 
Tanmay Bangalore 
Sachin Mumbai 


Optional Table Classes 


Along with the base table markup and the .table class, there are a few additional classes that you can use to style 
the markup. Following sections will give you a glimpse of all these classes. 


STRIPED TABLE 


By adding the .table-striped class, you will get stripes on rows within the <tbody> as seen in the following example: 


<table class="table table-striped"> 
<caption>Striped Table Layout</caption> 
<thead> 
<tr> 
<th>Name</th> 
<th>City</th> 
<th>Pincode</th> 
«EE» 
«/thead» 
<tbody> 
<tr> 
<td>Tanmay</td> 
<td>Bangalore</td> 
<td>560001</td> 
</tr> 
str» 
<td>Sachin</td> 
<td>Mumbai</td> 
<td>400003</td> 
E 
<tr> 
<td>Uma</td> 
<td>Pune</td> 
<td>411027</td> 


</tr> 
</tbody> 
</table> 
Striped Table Layout 
Name City Pincode 
Tanmay Bangalore 560001 
Sachin Mumbai 400003 
Uma Pune 411027 
TUTORIALS POINT 


Simply Easy Learning 


BORDERED TABLE 


By adding the .table-bordered class, you will get borders surrounding every element and rounded corners around 
the entire table as seen in the following example: 


<table class="table table-bordered"> 
<caption>Bordered Table Layout</caption> 
<thead> 
<tr> 
<th>Name</th> 
<th>City</th> 
<th>Pincode</th> 
E ES 
</thead> 
<tbody> 
SUI 
<td>Tanmay</td> 
<td>Bangalore</td> 
<td>560001</td> 
E EE 
<tr> 
<td>Sachin</td> 
<td>Mumbai</td> 
<td>400003</td> 
E 
<tr> 
<td>Uma</td> 
<td>Pune</td> 
<td>411027</td> 


tre 
«/tbody» 
</table> 
Bordered Table Layout 
Name City Pincode 
Tanmay Bangalore 560001 
Sachin Mumbai 400003 
Uma Pune 411027 
HOVER TABLE 


By adding the .table-hover class, a light gray background will be added to rows while the cursor hovers over them, 
as seen in the following example: 


<table class="table table-hover"> 
<caption>Hover Table Layout</caption> 
<thead> 
KEL> 
<th>Name</th> 
<th>City</th> 
<th>Pincode</th> 
«ftr 
«/thead» 
<tbody> 
<tr> 
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<td>Tanma y</td> 
<td>Bangalore</td> 
<td>560001</td> 
</te> 
<tr> 
<td>Sachin</td> 
<td>Mumbai</td> 
<td>400003</td> 
«EE 
<tr> 
<td>Uma</td> 
<td>Pune</td> 
<td>411027</td> 


e EE 
«/tbody» 
«/table» 
Hover Table Layout 
Name City Pincode 
Tanmay Bangalore > 560001 
Sachin Mumbai 400003 
Uma Pune 411027 
CONDENSED TABLE 


By adding the .table-condensed class, row padding is cut in half to condense the table. as seen in the following 
example. This is useful if you want denser information. 


<table class="table table-condensed"> 
<caption>Condensed Table Layout</caption> 
<thead> 
Sr 
<th>Name</th> 
<th>City</th> 
<th>Pincode</th> 
Sy tre 
«/thead» 
<tbody> 
SEL > 
<td>Tanmay</td> 
<td>Bangalore</td> 
<td>560001</td> 
«EE 
<tr> 
<td>Sachin</td> 
<td>Mumbai</td> 
<td>400003</td> 
</tr> 
<tr> 
<td>Uma</td> 
<td>Pune</td> 
<td>411027</td> 
C pgs 
«/tbody» 
</table> 
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Condensed Table Layout 


Name City Pincode 
Tanmay Bangalore 560001 
Sachin Mumbai 400003 
Uma Pune 411027 


Contextual classes 


The Contextual classes shown in following table will allow you to change the background color of your table rows 
or individual cells. 


Class Description 

.active Applies the hover color to a particular row or cell 
-SUCCeSS Indicates a successful or positive action 

warning Indicates a warning that might need attention 
.danger Indicates a dangerous or potentially negative action 


These classes can be applied to <tr>, <td> or <th>. 


<table class="table"> 
<caption>Contextual Table Layout</caption> 
<thead> 
<tr> 
<th>Product</th> 
<th>Payment Date</th> 
<th>Status</th> 
<tr> 
</thead> 
<tbody> 
<tr class="active"> 
<td>Product1</td> 
<td>23/11/2013</td> 
<td>Pending</td> 
STE 
<tr class="success"> 
<td>Product2</td> 
<td>10/11/2013</td> 
<td>Delivered</td> 
E E 
«tr class="warning"> 
«td»Product3«/td» 
<td>20/10/2013</td> 
<td>In Call to confirm</td> 
e Em 
«tr class="danger"> 
«td»Product4«/td» 
<td>20/10/2013</td> 
<td>Declined</td> 
</tr> 
</tbody> 
</table> 
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Contextual Table Layout 


Product Payment Date Status 

Producti 23/11/2013 Pending 

Product2 10/11/2013 Delivered 

Product3 20/10/2013 in Call to confirm 

Product4 20/10/2013 Declined 
Responsive tables 


By wrapping any .table in .table-responsive class, you will make the table scroll horizontally up to small devices 
(under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables. 


<div class="table-responsive"> 
<table class="table"> 
<caption>Responsive Table Layout</caption> 
<thead> 
LEES 
<th>Product</th> 
<th>Payment Date</th> 
<th>Status</th> 
</tr> 
</thead> 
<tbody> 
Sui 
«td»Producti«/td» 
<td>23/11/2013</td> 
<td>Pending</td> 
chr 
<tr> 
<td>Product2</td> 
<td>10/11/2013</td> 
<td>Delivered</td> 
«rtr 
Str 
«td»Product3«/td» 
«td»20/10/2013«/td» 
«td»In Call to confirm</td> 
«yere 
«tr» 
«td»Product4«/td» 
«td»20/10/2013«/td» 
«td»Declined«/td» 
«pr» 
«/tbody» 
«/table» 
</div> 
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Product 
Product1 
Product2 
Product3 


Product4 
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Responsive Table Layout 


Payment Date 
23/11/2013 
10/11/2013 
20/10/2013 


20/10/2013 


Status 

Pending 
Delivered 

In Call to confirm 


Declined 


Bootstrap Forms 


n this chapter we will study how to create forms with ease using Bootstrap. Bootstrap makes it easy with the 


simple HTML markup and extended classes for different styles of forms. 


Form Layout 


Bootstrap provides you with following types of form layouts: 
e Vertical (default) form 
e Inline form 


e Horizontal form 


VERTICAL OR BASIC FORM 


The basic form structure comes with Bootstrap; individual form controls automatically receive some global styling. 
To create a basic form do the following: 


e Add a role form to the parent «form» element. 
e Wrap labels and controls in a <div> with class .form-group. This is needed for optimum spacing. 


e Addaclass of .form-control to all textual «input», <textarea>, and «select» elements. 


«form role="form"> 
<div class="form-group"> 
«label for="name">Name</label> 
<input type="text" class-"form-control" id-"name" 
placeholder="Enter Name"> 
</div> 
<div class="form-group"> 
<label for="inputfile">File input</label> 
<input type="file" id="inputfile"> 
<p class="help-block">Example block-level help text here.</p> 
</div> 
<div class="checkbox"> 
<label> 
<input type="checkbox"> Check me out 
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</label> 
</div> 
<button type="submit" class="btn btn-default">Submit</button> 
</form> 


Name 
File input 
| Browse... | No file selected 
evel neip i 
Check me out 
Submit 


INLINE FORM 


To create a form where all of the elements are inline, left aligned and labels are alongside, add the class 


inline to the <form> tag. 


<form class="form-inline" role="form"> 
<div class="form-group"> 
<label class="sr-only" for="name">Name</label> 
<input type="text" class="form-control" id="name" 
placeholder="Enter Name"> 
</div> 
<div class="form-group"> 
<label class="sr-only" for="inputfile">File input</label> 
<input type="file" id="inputfile"> 
</div> 
<div class="checkbox"> 
<label> 
<input type="checkbox"> Check me out 
</label> 
</div> 
<button type="submit" class="btn btn-default">Submit</button> 
</form> 


| Browse... No file selected Check me out Submit 


.form- 


e By default Inputs, selects, and textareas have 100% width in Bootstrap. You need to set a width on the form 


controls when using inline form. 


e Using the class .sr-only you can hide the labels of the inline forms. 


HORIZONTAL FORM 


Horizontal forms stands apart from the others not only in the amount of markup, but also in the presentation of the 


form. To create a form that uses the horizontal layout, do the following: 


e Adda class of .form-horizontal to the parent «form» element. 
e Wrap labels and controls in a <div> with class .form-group. 
e Add a class of .control-label to the labels. 
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<form class="form-horizontal" role="form"> 
<div class="form-group"> 
<label for="firstname" class="col-sm-2 control-label">First Name</label> 
<div class-"col-sm-10'- 
<input type="text" class="form-control" id="firstname" 
placeholder="Enter First Name"> 
</div> 
</div> 
<div class="form-group"> 
<label for="lastname" class="col-sm-2 control-label">Last Name</label> 
<div class="col-sm-10"> 
<input type="text" class-"form-control" id="lastname" 
placeholder="Enter Last Name"> 
</div> 
</div> 
<div class="form-group"> 
<div class="col-sm-offset-2 col-sm-10"> 
<div class="checkbox"> 
<label> 
<input type="checkbox"> Remember me 
</label> 
</div> 
</div> 
</div> 
<div class="form-group"> 
<div class="col-sm-offset-2 col-sm-10"> 
<button type="submit" class="btn btn-default">Sign in</button> 
</div> 
</div> 
</form> 


Fins Name 
Last Name 


Remember me 


Sign m 


Supported Form Controls 


Bootstrap natively supports the most common form controls mainly input, textarea, checkbox, radio, and select. 


INPUTS 


The most common form text field is the input—this is where users will enter most of the essential form data. 
Bootstrap offers support for all native HTML5 input types: text, password, datetime, datetime-local, date, month, 
time, week, number, email, url, search, tel, and color. Proper type declaration is required to make /nputs fully 
styled. 


<form role="form"> 
<div class="form-group"> 
<label for="name">Label</label> 
<input type="text" class="form-control" placeholder="Text input"> 
</div> 
</form> 
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Label 


TEXTAREA 


The textarea is used when you need multiple lines of input. Change rows attribute as necessary (fewer rows = 
smaller box, more rows = bigger box). 


<form role="form"> 
<div class="form-group"> 
<label for="name">Text Area</label> 
<textarea class="form-control" rows="3"></textarea> 
</div> 
</form> 


Text Area 


CHECKBOXES AND RADIOS 


Checkboxes and radio buttons are great when you want users to choose from a list of preset options. 


e When building a form, use checkbox if you want the user to select any number of options from a list. 
Use radio if you want to limit the user to just one selection. 

e Use .checkbox-inline or .radio-inline class to a series of checkboxes or radios for controls appear on the same 
line. 


The following example demonstrates both (default and inline) types: 


<label for="name">Example of Default Checkbox and radio button </label> 
<div class="checkbox"> 
<label><input type="checkbox" value="">Option 1</label> 
</div> 
<div class="checkbox"> 
<label><input type="checkbox" value="">Option 2</label> 
</div> 


<div class="radio"> 
<label> 
<input type="radio" name="optionsRadios" id="optionsRadiosl" 
value="optionl" checked» Option 1 
</label> 
</div> 
<div class="radio"> 
<label> 
<input type="radio" name="optionsRadios" id="optionsRadios2" 
value="option2"> 
Option 2 - selecting it will deselect option 1 
</label> 
</div> 
<label for="name">Example of Inline Checkbox and radio button </label> 
<div> 
<label class="checkbox-inline"> 
<input type="checkbox" id="inlineCheckbox1" value-"optionl"» Option 1 
</label> 
<label class="checkbox-inline"> 
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<input type="checkbox" id="inlineCheckbox2" value="option2"> Option 2 
</label> 
<label class="checkbox-inline"> 
<input type="checkbox" id="inlineCheckbox3" value="option3"> Option 3 
</label> 
<label class="checkbox-inline"> 
<input type="radio" name="optionsRadiosinline" id="optionsRadios3" 
value="optionl" checked» Option 1 
</label> 
<label class="checkbox-inline"> 
<input type="radio" name="optionsRadiosinline" id="optionsRadios4" 
value="option2"> Option 2 
</label> 
</div> 


Example of Default Checkbox and radio button 


Option 1 
Option 2 


@ Option 1 
Option 2 - selecting it will deselect option 1 


Example of Inline Checkbox and radio button 
Option 1 Option 2 Option 3 € Option 1 Option 2 


SELECTS 


A select is used when you want to allow the user to pick from multiple options, but by default it only allows one. 
e Use «select» for list options with which the user is familiar, such as states or numbers. 


e Use multiple="multiple" to allow the user to select more than one option. 


The following example demonstrates both (select and multiple) types: 


<form role="form"> 
<div class="form-group"> 

<label for="name">Select list</label> 

<select class="form-control"> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
<option>4</option> 
<option>5</option> 

</select> 


<label for="name">Mutiple Select list</label> 

<select multiple class="form-control"> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
<option>4</option> 
<option>5</option> 

</select> 

</div> 
</form> 
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Select fist 


Mutiple Select list 


Static control 


Use the class .form-control-static on a «p», when you need to place plain text next to a form label within a 
horizontal form. 


«form class="form-horizontal" role="form"> 
<div class="form-group"> 
<label class="col-sm-2 control-label">Email</label> 
<div class="col-sm-10"> 
<p class="form-control-static">email@example.com</p> 
</div> 
</div> 
<div class="form-group"> 
<label for="inputPassword" class="col-sm-2 control-label">Password</label> 
<div class="col-sm-10"> 
<input type="password" class="form-control" id="inputPassword" 
placeholder="Password"> 
</div> 
</div> 
</form> 


Email email@example.com 


Password 


Form Control States 


In addition to the :focus (Le, a user clicks into the input or tabs onto it) state, Bootstrap offers styling for disabled 
inputs and classes for form validation. 


INPUT FOCUS 


When an input receives :focus, the outline of the input is removed and a box-shadow is applied. 


DISABLED INPUTS 


If you need to disable an input, simply adding the disabled attribute will not only disable it; it will also change the 
styling and the mouse cursor when the cursor hovers over the element. 


DISABLED FIELDSETS 


Add the disabled attribute to a <fieldset> to disable all the controls within the <fieldset> at once. 


VALIDATION STATES 


Bootstrap includes validation styles for error, warning, and success messages. To use, simply add the appropriate 
class (.has-warning, .has-error, or .has-success) to the parent element. 


Following example demonstrates all the form control states: 


<form class="form-horizontal" role="form"> 
<div class="form-group"> 
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<label class="col-sm-2 control-label">Focused</label> 
<div class="co01=sm-10"> 
<input class="form-control" id="focusedInput" type="text" 
value="This is focused..."> 
</div> 
</div> 
<div class="form-group"> 
<label for="inputPassword" class="col-sm-2 control-label"> 
Disabled 
</label> 
<div class="col-sm-10"> 
<input class="form-control" id="disabledInput" type="text" 
placeholder="Disabled input here..." disabled> 
</div> 
cde 
«fieldset disabled» 
<div class="form-group"> 
<label for="disabledTextInput" class="col-sm-2 control-label"> 
Disabled input (Fieldset disabled) 
</label> 
<div class="col-sm-10"> 
<input type="text" id="disabledTextInput" class="form-control" 
placeholder="Disabled input"> 
</div> 
x/divy> 
<div class="form-group"> 
<label for="disabledSelect" class="col-sm-2 control-label"> 
Disabled select menu (Fieldset disabled) 
</label> 
<div class="col-sm-10"> 
<select id="disabledSelect" class="form-control"> 
<option>Disabled select</option> 
</select> 
</div> 
</div> 
</fieldset> 
<div class="form-group has-success"> 
<label class="col-sm-2 control-label" for="inputSuccess"> 
Input with success 
</label> 
<div class="col-sm-10"> 
<input type="text" class-"form-control" id-"inputSuccess"» 
</div> 
</div> 
<div class="form-group has-warning"> 
<label class="col-sm-2 control-label" for="inputWarning"> 
Input with warning 
</label> 
<div class="col-sm-10"> 
<input type="text" class="form-control" id="inputWarning"> 
</div> 
</div> 
<div class="form-group has-error"> 
<label class="col-sm-2 control-label" for="inputError"> 
Input with error 
</label> 
<div class="col-sm-10"> 
<input type="text" class="form-control" id="inputError"> 
gave 
«/div» 
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</form> 


Focused his is focused. 
Disabled 


Disabled input 
(Fieldset disabled) 


Disabled select 
menu (Fieldset 
disabled) 


Disabled select 


input with success 
nput wih warning 


Input with error 


Form Control Sizing 


You can set heights and widths of forms using classes like .input-lg and .col-Ig-* respectively. Following example 


demonstrates this: 


«form role="form"> 
<div class="form-group"> 
<input class="form-control input-lg" type="text" 
placeholder=".input-1g"> 
</div> 


<div class="form-group"> 


<input class="form-control" type="text" placeholder="Default input"> 


</div> 


<div class="form-group"> 
<input class="form-control input-sm" type="text" 
placeholder=".input-sm"> 
</div> 
<div class="form-group"> 
</div> 
<div class="form-group"> 
<select class="form-control input-1g"> 
<option value="">.input-lg</option> 
</select> 
</div> 
<div class="form-group"> 
<select class="form-control"> 
<option value="">Default select</option> 
</select> 
</div> 
<div class="form-group"> 
<select class="form-control input-sm"> 
<option value="">.input-sm</option> 
</select> 
</div> 


<div class="row"> 
<div class="col-lg-2"> 


<input type="text" class="form-control" placeholder=" 


</div> 
<diy class-"col-lg-3"» 
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col-lg-2"5 


<input type="text" class-"form-control" placeholder-".col-1g-3"» 
</div> 


<div class="col-lg-4"> 


<input type="text" class="form-control" placeholder=".col-lg-4"> 
</div> 


</div> 
</form> 


input-lg 


Help Text 


Bootstrap form controls can have a block level help text that flows with the inputs. To add a full width block of 
content, use the .help-block after the «input». Following example demonstrates this: 


<form role="form"> 
<span>Example of Help Text</span> 
<input class="form-control" type="text" placeholder=""> 
<span class="help-block">A longer block of help text that 


breaks onto a new line and may extend beyond one line.</span> 
</form> 


Example of Help Text 
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Bootstrap Buttons 


his chapter will discuss about how to use Bootstrap button with examples. Anything that is given a class 


of .btn will inherit the default look of a gray button with rounded corners. However Bootstrap provides some 
options to style buttons, which are summarized in the following table: 


Class Description 

Btn Default/ Standard button. 

btn-primary Provides extra visual weight and identifies the primary action in a set of buttons. 
btn-success Indicates a successful or positive action. 

btn-info Contextual button for informational alert messages. 

btn-warning Indicates caution should be taken with this action. 

btn-danger Indicates a dangerous or potentially negative action. 

btn-link Deemphasize a button by making it look like a link while maintaining button behavior. 


Following example demonstrates all the above button classes: 


<!-- Standard button --> 

<button type="button" class="btn btn-default">Default Button</button> 
<!-- Provides extra visual weight and identifies the primary action in a set of 
buttons ==> 

<button type="button" class="btn btn-primary">Primary Button</button> 
<!-- Indicates a successful or positive action --> 

<button type="button" class="btn btn-success">Success Button</button> 
<!-- Contextual button for informational alert messages --> 

<button type="button" class="btn btn-info">Info Button</button> 

<!-- Indicates caution should be taken with this action --> 

<button type="button" class="btn btn-warning">Warning Button</button> 
<!-- Indicates a dangerous or potentially negative action --> 

«button type-"button" class-"btn btn-danger">Danger Button</button> 
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<!-- Deemphasize a button by making it look like a link while maintaining button 
behavior --> 
<button type="button" class="btn btn-link">Link Button</button> 


Default Button Primary tto Success Button Danger Button nk Butto 


Button Size 


The following table summarizes classes used to get buttons of various sizes: 


Class Description 

.btn-lg This makes button size large. 

.btn-sm This makes button size small. 

.btn-xs This makes button size with extra small. 

.btn-block This creates block level buttons—those that span the full width of a parent. 


The following example demonstrates this: 


<p> 
<button type="button" class="btn btn-primary btn-lg"> 
Large Primary button 
</button> 
<button type="button" class="btn btn-default btn-lg" 
>Large button 
</button> 
</p> 
<p> 
<button type="button" class="btn btn-primary"> 
Default size Primary button 
</button> 
<button type="button" class="btn btn-default"> 
Default size button 
</button> 
</p> 
<p> 
<button type="button" class="btn btn-primary btn-sm"> 
Small Primary button 
</button> 
<button type="button" class="btn btn-default btn-sm"> 
Small button 
</button> 
</p> 
<p> 
<button type="button" class="btn btn-primary btn-xs"> 
Extra small Primary button 
</ but ton> 


<button type="button" class="btn btn-default btn-xs"> 
Extra small button 
SE Een 
</p> 
<p> 


<button type="button" class="btn btn-primary btn-1g btn-block"> 
Block level Primary button 
</Dutton> 
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<button type="button" class="btn btn-default btn-lg btn-block"> 
Block level button 
</button> 
</p> 


Large Primary button Large button 


Extra small bution 


Block level Primary button 


Block leve! button 


Button State 


Bootstrap provides classes which allow you change the state of buttons say active, disabled etc each of these are 
discussed in the following sections: 


ACTIVE STATE 


Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. The 
following table summarizes classes used to make button element and anchor element active: 


Element Class 
Button element Use .active class to show that it is activated.. 
Anchor element Use .active class to <a> buttons to show that it is activated. 


The following example demonstrates this: 


<p> 
<button type="button" class="btn btn-default btn-1g "> 
Default Button 
</button> 
<button type="button" class="btn btn-default btn-lg active"> 
Active Button 
</button> 
</p> 
<p> 
<button type="button" class="btn btn-primary btn-lg "> 
Primary button 
</button> 
<button type="button" class="btn btn-primary btn-lg active"> 
Active Primary button 
</button> 
</p> 


TUTORIALS POINT 
Simply Easy Learning 


Default Button Active Button 


Primary button Active Primary button 


Deafult Link Active Link 


Primary link Active Primary link 


DISABLED STATE 


When you disable a button, it will fade in color by 50%, and lose the gradient. 
The following table summarizes classes used to make button element and anchor element disabled: 


Element Class 
Button element Add the disabled attribute to <button> buttons. 


Add the disabled class to <a> buttons. 
Anchor element Note: This class will only change the <a>'s appearance, not its functionality. You need to use 
custom JavaScript to disable links here. 


The following example demonstrates this: 


<p> 
<button type="button" class="btn btn-default btn-lg"> 
Default Button 
</button> 
<button type="button" class="btn btn-default btn-lg" disabled="disabled"> 
Disabled Button 
</button> 
</p> 
<p> 
<button type="button" class="btn btn-primary btn-lg "> 
Primary button 
</button> 
<button type="button" class="btn btn-primary btn-lg" disabled="disabled"> 
Disabled Primary button 
</button> 
</p> 
<p> 
<a href="#" class="btn btn-default btn-lg" role="button"> 
Link 
</a> 
«a href="#" class="btn btn-default btn-lg disabled" role="button"> 
Disabled Link 
</a> 
</p> 
<p> 
<a href="#" class="btn btn-primary btn-lg" role="button"> 
Primary link 
</a> 
<a href="#" class="btn btn-primary btn-lg disabled" role="button"> 
Disabled Primary link 
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</a> 
</p> 


Default Button Disabled Button 


Primary buttor Disabled Primary button 


Link Disabled Link 


Button Tags 


You may use button classes with <a>, <button>, or <input> element. But it is recommended that you use it with 
<button> elements mostly to avoid cross browser inconsistency issues. 


The following example demonstrates this: 


<a class="btn btn-default" href="#" role="button">Link</a> 
<button class="btn btn-default" type="submit">Button</button> 
<input class="btn btn-default" type="button" value="Input"> 
<input class="btn btn-default" type="submit" value="Submit"> 


Link Button Input Submit 
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Bootstrap Images 


n this chapter we will learn Bootstrap support for images. Bootstrap provides three classes that can be used to 


apply some simple styles to images: 


e  .img-rounded: adds border-radius:6px to give the image rounded corners. 
e  .img-circle: makes the entire image round by adding border-radius:500px. 
e  .img-thumbnail: adds a bit of padding and a gray border: 


The following example demonstrates this: 


<img src="/bootstrap/images/download.png" 
class="img-rounded"> 

<img src="/bootstrap/images/download.png" 
class="img-circle"> 

<img src="/bootstrap/images/download.png" 
class="img-thumbnail"> 
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Bootstrap Helper Classes 


his chapter discusses some of the helper classes in Bootstrap that might come in handy. 


Close icon 
Use the generic close icon for dismissing content like modals and alerts. Use the class close to get the close icon. 


<p>Close Icon Example 
<button type="button" class="close" aria-hidden="true"> 
times; 
</button> 
</p> 


Close Icon Example 


Carets 


Use carets to indicate dropdown functionality and direction. To get this functionality use the class caretwith a 
<span> element. 


<p>Caret Example 
<span class="caret"></span> 
</p> 


Carat Example v 


Quick floats 


You can float an element to the left or right with class pull-left or pull-right respectively. Following example 
demonstrates this. 


<div class="pull-left"> 
Quick Float to left 

</div> 

<div class="pull-right"> 
Quick Float to right 

</div> 
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Quick Float to left Quick Float to right 


To align components in navbars with utility classes, use .navbar-left or .navbar-right instead. See the navbar 
chapter for details. 


Center content blocks 
Use class center-block to set an element to center. 


<div class="row"> 
«div class="center-block" style="width: 200px;background-color:tfccc; "> 
This is an example for center-block 
</div> 
</div> 


This is an example for 
center-block 


Clearfix 


To clear the float of any element, use the .clearfix class. 


<div class-"clearfix"  style-"background: #D8D8D8;border: 1px solid #000;padding: 
leed 
<div class="pull-left" style="background: #58D3F7; "> 
Quick Float to left 
</div> 
<div class="pull-right" style="background: #DA81F5;"> 
Quick Float to right 
EE 


</div> 


Showing and hiding content 


You can force an element to be shown or hidden (including for screen readers) with the use of 
classes.show and .hidden. 


<div class="row" style="padding: 91px 100px 19px 50px; "> 
«div class="show" style="left-margin:10px;width: 300px;background-color:#ccc;"> 
This is an example for show class 
</div> 
<div class="hidden" style="width: 200px; background-color: #ccc; "> 
This is an example for hide class 
</div> 
</div> 


This is an example for show class 


Screen reader content 


You can hide an element to all devices except screen readers with class .sr-only. 
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<div class="row" style="padding: 91px 100px 19px 50px;"> 
<form class="form-inline" role="form"> 
<div class="form-group"> 
<label class="sr-only" for="email">Email address</label> 
<input type="email" class="form-control" placeholder="Enter email"> 
</div> 
<div class="form-group"> 
<label class="sr-only" for="pass">Password</label> 
<input type="password" class="form-control" placeholder="Password"> 
</div> 
</div> 


Here we can see that the label of both the input types is assigned the class sr-only, hence labels will be visible to 
only screen readers. 
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Bootstarp Responsive 


Utilities 


ootstrap provides some handful helper classes, for faster mobile-friendly development. These can be 


used for showing and hiding content by device via media query combined with large, small, and medium devices. 


Use these sparingly and avoid creating entirely different versions of the same site. Responsive utilities are 
currently only available for block and table toggling. 


Classes 
.Visible-xs 
.Visible-sm 
.Visible-md 
.Visible-lg 
-hidden-xs 
-hidden-sm 
-hidden-md 
-hidden-lg 


Print classes 


Devices 

Extra small (less than 768px) visible 
Small (up to 768 px) visible 

Medium (768 px to 991 px) visible 
Larger (992 px and above) visible 
Extra small (less than 768px) hidden 
Small (up to 768 px) hidden 

Medium (768 px to 991 px) hidden 


Larger (992 px and above) hidden 


Following table lists the print classes. Use these for toggling content for print. 


Classes 
.Visible-print 


-hidden-print 
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Print 
Yes Visible 


Visible only to browser not to print. 


Example 


Following example demonstrates the use of above listed helper classes. Resize your browser or load the example 
on different devices to test the responsive utility classes. 


<div class="container" style="padding: 40px;"> 
<div class="row visible-on"> 
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8; 
box-shadow: inset lpx -lpx lpx #444, inset -lpx lpx lpx +444;"> 
<span class="hidden-xs">Extra small</span> 


<span class="visible-xs">W Visible on x-small</span> 
</div> 
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8; 
box-shadow: inset lpx -lpx lpx #444, inset -lpx lpx lpx #444;"> 
<span class="hidden-sm">Small</span> 
<span class="visible-sm">W Visible on small</span> 
</div> 
<div class="clearfix visible-xs"></div> 
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8; 
box-shadow: inset lpx -lpx lpx #444, inset -lpx lpx lpx #444; "> 
<span class="hidden-md">Medium</span> 


<span class="visible-md">W Visible on medium</span> 
</div> 
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8; 
box-shadow: inset lpx -lpx lpx #444, inset -lpx lpx lpx #444;"> 
<span class="hidden-1g">Large</span> 
<span class="visible-lg">W Visible on large</span> 
</div> 
</div> 


EAT ET IT ELT TIT) 


Checkmarks indicate the element is visible in your current viewport. 
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Bootstrap Glyphicons 


his chapter will discuss about Glyphicons, its use and some examples. Bootstrap bundles 200 glyphs in 


font format. First let us understand what are Glyphicons. 


What are Glyphicons? 


Glyphicons are icon fonts which you can use in your web projects. Glyphicons Halflings are not free and require 
licensing, however their creator has made them available for Bootstrap projects free of cost. 


It is recommended, as a thank you, we ask you to include an optional link back to GLYPHICONS whenever 
practical. — Bootstrap Documentation 


Where to find Glyphicons? 


Now that we have downloaded Bootstrap 3.x version and understand its directory structure from 
chapter Environment Setup, glyphicons can be found within the fonts folder. This contains following files: 


H glyphicons-halflings-regular.eot 
e. glyphicons-halflings-regular.svg 
° glyphicons-halflings-regular.ttf 


° glyphicons-halflings-regular.woff 


Associated CSS rules are present within bootstrap.css and bootstrap-min.css files within css folder ofdist folder. 
You can see the available glyphicons at this link : Glyphicons List 


Usage 


To use the icons, simply use the following code just about anywhere in your code. Leave a space between the icon 
and text for proper padding. 


<span class="glyphicon glyphicon-search"></span> 
Following example demonstrates this: 


<p> 
<button type="button" class="btn btn-default"> 
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<span class="glyphicon glyphicon-sort-by-attributes"></span> 
</button> 
<button type="button" class="btn btn-default"> 
<span class="glyphicon glyphicon-sort-by-attributes-alt"></span> 


</button> 
<button type="button" class="btn btn-default"> 
<span class="glyphicon glyphicon-sort-by-order"></span> 
</button> 
<button type="button" class="btn btn-default"> 


<span class="glyphicon glyphicon-sort-by-order-alt"></span> 
</button> 
</p> 
<button type="button" class="btn btn-default btn-lg"> 
<span class="glyphicon glyphicon-user"></span> User 
</button> 
<button type="button" class="btn btn-default btn-sm"> 
<span class="glyphicon glyphicon-user"></span> User 
</button> 
<button type="button" class="btn btn-default btn-xs"> 
<span class="glyphicon glyphicon-user"></span> User 
</button> 


2 User S User $£ User 
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Bootstrap Dropdowns 


his chapter will highlight about Bootstrap dropdown menus. Dropdown menus are toggleable, contextual 


menus for displaying links in a list format. This can be made interactive with the dropdown JavaScript plugin. 


To use dropdown, just wrap the dropdown menu within the class .dropdown. Following example demonstrates a 
basic dropdown menu: 


<div class="dropdown"> 
<button type="button" class="btn dropdown-toggle" id="dropdownMenul" 
data-toggle="dropdown"> 
Topics 
<span class="caret"></span> 
</button> 
«ul class-"dropdown-menu" role="menu" aria-labelledby="dropdownMenul"> 
<li role="presentation"> 
<a role="menuitem" tabindex="-1" href="#">Java</a> 
</li> 
<li role="presentation"> 
<a role="menuitem" tabindex="-1" href="#">Data Mining</a> 
E 
<li role="presentation"> 
<a role="menuitem" tabindex="-1" href="#"> 
Data Communication/Networking 
</a> 
SF li> 
<li role="presentation" class="divider"></li> 
<li role="presentation"> 
<a role="menuitem" tabindex-"-1" href="#">Separated link</a> 
</li> 
</ul> 
</div> 
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Topics e 


Java 
Data Mining 


Data Communication/Networking 


Separated link 


OPTIONS 
ALIGNMENT 


Align the dropdown menu to right by adding the class .pull-right to .dropdown-menu. Following example 
demonstrates this: 


<div class="dropdown"> 
<button type="button" class="btn dropdown-toggle" id="dropdownMenul" 
data-toggle="dropdown">Topics 
<span class="caret"></span> 
</button> 
<ul class="dropdown-menu pull-right" role="menu" 
aria-labelledby="dropdownMenul"> 
<li role="presentation"> 
<a role="menuitem" tabindex="-1" href="#">Java</a> 
</li> 
<li role="presentation"> 
<a role="menuitem" tabindex="-1" href="#">Data Mining</a> 
</Li> 
<li role="presentation"> 
<a role="menuitem" tabindex="-1" href="#"> 
Data Communication/Networking 
</a> 
</li> 
<li role="presentation" class="divider"></1li> 
<li role="presentation"> 
<a role="menuitem" tabindex="-1" href="#">Separated link</a> 


</li> 
<fal> 
c gag 
Topics e 
Java 
Data Mining 


Data Communication/Networking 


Separated link 


HEADERS 


You can add a header to label sections of actions in any dropdown menu by using the classdropdown-header. 
Following example demonstrates this: 
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<div class="dropdown"> 
«button type="button" class="btn dropdown-toggle" id="dropdownMenul" 
data-toggle="dropdown"> 
Topics 
<span class="caret"></span> 
</button> 
«ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenul"> 
<li role="presentation" class="dropdown-header">Dropdown header</1i> 
<li role="presentation" > 
<a role="menuitem" tabindex="-1" href="#">Java</a> 
</li> 
<li role="presentation"> 
<a role="menuitem" tabindex="-1" href="#">Data Mining</a> 
</li> 
<li role="presentation"> 
<a role="menuitem" tabindex="-1" href="#"> 
Data Communication/Networking 
</a> 
fq 
<li role="presentation" class="divider"></li> 
<li role-"presentation" class="dropdown-header">Dropdown header</1i> 
<li role="presentation"> 
<a role="menuitem" tabindex="-1" href="#">Separated link</a> 
</LI> 
</ul> 
</div> 


Topics » 


$ 


Java 
Data Mining 


Data Communication/Networking 


Separated link 
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Bootstrap Button Groups 


utton groups allow multiple buttons to be stacked together on a single line. This is useful when you want 


to place items like alignment buttons together. You can add on optional JavaScript radio and checkbox style 
behavior with Bootstrap Button Plugin. 


Following table summarizes the important classes Bootstrap provides to use button groups: 


Class 


.btn-group 


.btn-toolbar 


.btn-group-lg, 
.btn-group-sm, 
.btn-group-xs 


.btn-group- 
vertical 


Description 


This class is used form a basic button group. 
Wrap a series of buttons with 
class .btn in.btn-group. 


This helps to combine sets of «div class="btn- 
group"» into a «div class="btn-toolbar"> for 
more complex components. 


These classes can be applied to button group 
instead of resizing each button. 


This class make a set of buttons appear 
vertically stacked rather than horizontally. 


Basic Button Group 


Following examples demonstrates the use of class .btn-group discussed in the above table: 


<div class="btn-group"> 
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Code Sample 


«div class-"btn-group"» 
<button type="button" class="btn 
btn-default">Buttonl</button> 
<button type="button" class="btn 
btn-default">Button2</button> 
</div> 


<div class="btn-toolbar" 
role="toolbar"> 
<div class="btn-group">...</div> 
<div class="btn-group">...</div> 
Ee 


<div class="btn-group btn-group- 
LU so AS 
<div class="btn-group btn-group- 
Stil Ss 6 Tela 
<div elas s=—Ubin—-Groupsoen—onoup— 
ESSE. y E cli 


<div class-"btn-group-vertical"» 


Sy (lai 


<button type="button" class="btn btn-default">Button 1</button> 

<button type="button" class="btn btn-default">Button 2</button> 

<button type="button" class="btn btn-default">Button 3</button> 
</div> 


Button 1 Button 2 Button 3 


Button Toolbar 
Following examples demonstrates the use of class .btn-toolbar discussed in the above table: 


<div class="btn-toolbar" role="toolbar"> 
<div class="btn-group"> 


<button type="button" class="btn btn-default">Button 1</button> 
<button type="button" class="btn btn-default">Button 2</button> 
<button type="button" class="btn btn-default">Button 3</button> 
</div> 

<div class="btn-group"> 

<button type="button" class="btn btn-default">Button 4</button> 
<button type="button" class="btn btn-default">Button 5</button> 
<button type="button" class="btn btn-default">Button 6</button> 
</div> 

<div class="btn-group"> 

<button type="button" class="btn btn-default">Button 7</button> 
<button type="button" class="btn btn-default">Button 8</button> 
<button type="button" class="btn btn-default">Button 9</button> 


</div> 
</div> 


Button 1 Button 2 Button 3 Button 4 Button 5 Button 6 Button 7 Button 8 Button 9 


Button Size 
Following examples demonstrates the use of class .btn-group-* discussed in the above table: 


<div class="btn-group btn-group-lg"> 


<button type="button" class="btn btn-default">Button 1</button> 
<button type="button" class="btn btn-default">Button 2</button> 
<button type="button" class="btn btn-default">Button 3</button> 
</div> 

<div class="btn-group btn-group-sm"> 

<button type="button" class="btn btn-default">Button 4</button> 
<button type="button" class="btn btn-default">Button 5</button> 
<button type="button" class="btn btn-default">Button 6</button> 

</div> 

<div class="btn-group btn-group-xs"> 

<button type="button" class="btn btn-default">Button 7</button> 
<button type="button" class="btn btn-default">Button 8</button> 
<button type="button" class="btn btn-default">Button 9</button> 


«ga 
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Button 1 Button 2 Button 3 Button4  Button5  Button6 | Button7 Bution8 Button 9 


Nesting 


You can nest button groups within another button group i.e, place a .btn-group within another .btn-group . This is 
done when you want dropdown menus mixed with a series of buttons. 


<div class="btn-group"> 
<button type="button" class="btn btn-default">Button 1</button> 
<button type="button" class="btn btn-default">Button 2</button> 


<div class="btn-group"> 
<button type="button" class="btn btn-default dropdown-toggle" 
data-toggle="dropdown"> 
Dropdown 
<span class="caret"></span> 
</button> 
<ul class="dropdown-menu"> 
<li><a href="#">Dropdown link 1«/a»«/li» 
<li><a href="#">Dropdown link 2«/a»«/li» 
</ul> 
</div> 
</div> 


Button 1 Button 2 | Dropdown ~ 


Dropdown link 1 
Dropdown link 2 


Vertical Buttongroup 
Following examples demonstrates the use of class .btn-group-vertical discussed in the above table: 


<div class="btn-group-vertical"> 
<button type="button" class="btn btn-default">Button 1</button> 
<button type="button" class="btn btn-default">Button 2</button> 


<div class="btn-group-vertical"> 
<button type="button" class="btn btn-default dropdown-toggle" 
data-toggle="dropdown"> 
Dropdown 
<span class="caret"></span> 
</button> 
<ul class="dropdown-menu"> 
<li><a href="#">Dropdown link 1«/a»«/li» 
<li><a href="#">Dropdown link 2«/a»«/li» 
</ul> 
</div> 
</div> 
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Button 1 
Button 2 


Dropdown + 


Dropdown link 1 
Dropdown link 2 
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Bootstrap Button Dropdowns 


his chapter will discuss about how to add dropdown menu to buttons using Bootstrap classes. To add a 


dropdown to a button, simply wrap the button and dropdown menu in a .btn-group. You can also use <span 
class="caret"></span> to act as an indicator that the button is a dropdown. 


The following example demonstrates a basic single button dropdowns: 


<div class="btn-group"> 
<button type="button" class="btn btn-default dropdown-toggle" 
data-toggle="dropdown"> 
Default <span class="caret"></span> 
</button> 
<ul class="dropdown-menu" role="menu"> 
<li><a href="*">Action</a></1i> 
<li><a href="#">Another action</a></1li> 
<li><a href="#">Something else here</a></1li> 
<li class-"divider"»«/li» 
<li><a href="#">Separated link</a></li> 
</ul> 
</div> 
<div class="btn-group"> 
<button type="button" class="btn btn-primary dropdown-toggle" 
data-toggle="dropdown"> 
Primary <span class="caret"></span> 
</button> 
<ul class="dropdown-menu" role="menu"> 
<li><a href="#">Action</a></li> 
<li><a href="#">Another action</a></1li> 
<li><a href="#">Something else here</a></1i> 
<li class-"divider"»«/li» 
<li><a href="#">Separated link</a></1li> 
</ul> 
</div> 


TUTORIALS POINT 
Simply Easy Learning 


Split Button Dropdowns 


Split button dropdowns use the same general style as the dropdown button but add a primary action along with the 
dropdown. Split buttons have the primary action on the left and a toggle on the right that displays the dropdown. 


<div class="btn-group"> 
<button type="button" class="btn btn-default">Default</button> 
<button type="button" class="btn btn-default dropdown-toggle" 
data-toggle="dropdown"> 
<span class="caret"></span> 
<span class="sr-only">Toggle Dropdown</span> 
</button> 
<ul class="dropdown-menu" role="menu"> 
<li><a href="#">Action</a></1li> 
<li><a href="#">Another action</a></1li> 
<li><a href="#">Something else here</a></1i> 
<li class-"divider"»«/li» 
<li><a href="#">Separated link</a></1li> 
<ul> 
</div> 
<div class="btn-group"> 
<button type="button" class="btn btn-primary">Primary</button> 
<button type="button" class="btn btn-primary dropdown-toggle" 
data-toggle="dropdown"> 
<span class="caret"></span> 
<span class="sr-only">Toggle Dropdown</span> 
</button> 
<ul class="dropdown-menu" role="menu"> 
<li><a href="*">Action</a></1i> 
<li><a href="#">Another action</a></1li> 
<li><a href="#">Something else here</a></1i> 
<li class-"divider"»«/li» 
<li><a href="#">Separated link</a></1li> 
</ul> 


</div> 


Button Dropdown Size 


You can use the dropdowns with any button size: .btn-large, .btn-sm, or .btn-xs. 


<div class="btn-group"> 
<button type="button" class="btn btn-default dropdown-toggle btn-lg" 
data-toggle="dropdown"> 
Default <span class="caret"></span> 
</button> 
<ul class="dropdown-menu" role="menu"> 
<li><a href="#">Action</a></1li> 
<li><a href="#">Another action</a></li> 
<li><a href="#">Something else here</a></1i> 
<li class-"divider"»«/li» 
<li><a href="#">Separated link</a></1li> 
</ul> 
</div> 
<div class="btn-group"> 
<button type="button" class="btn btn-primary dropdown-toggle btn-sm" 
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data-toggle="dropdown"> 
Primary <span class="caret"></span> 
</button> 
<ul class="dropdown-menu" role="menu"> 
<li><a href="#">Action</a></1li> 
<li><a href="#">Another action</a></1li> 
<li><a href="#">Something else here</a></1li> 
<li class-"divider"»«/li» 
<li><a href="#">Separated link</a></1li> 
</ul> 
</div> 
<div class="btn-group"> 
<button type="button" class="btn btn-success dropdown-toggle btn-xs" 
data-toggle="dropdown"> 
Success <span class="caret"></span> 
</button> 
<ul class="dropdown-menu" role="menu"> 
<li><a href="#">Action</a></1li> 
<li><a href="#">Another action</a></1li> 
<li><a href="#">Something else here</a></1li> 
<li class-"divider"»«/li» 
<li><a href="#">Separated link</a></li> 
</ul> 


</div> 


Dropup variation 


Menus can also be built to drop up rather than down. To achieve this, simply add .dropup to the parent.btn- 
group container. 


<div class="row" style="margin-left:50px; margin-top:200px"> 
<div class="btn-group dropup"> 
<button type="button" class="btn btn-default dropdown-toggle" 
data-toggle="dropdown"> 
Default <span class="caret"></span> 
</button> 
<ul class="dropdown-menu" role="menu"> 
<li><a href="#">Action</a></1li> 
<li><a href="#">Another action</a></1li> 
<li><a href="#">Something else here</a></1li> 
<li class="divider"></1i> 
<li><a href="#">Separated link</a></1li> 
</ul> 
</div> 
<div class="btn-group dropup"> 
<button type="button" class="btn btn-primary dropdown-toggle" 
data-toggle="dropdown"> 
Primary <span class="caret"></span> 
</button> 
<ul class="dropdown-menu" role="menu"> 
<li><a href="#">Action</a></1li> 
<li><a href="#">Another action</a></1li> 
<li><a href="#">Something else here</a></li> 
<li class-"divider"»«/li» 
<li><a href="#">Separated link</a></1li> 
</ul> 
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</div> 
</div> 


Action 
Another action 
Something else here 


Separated link 
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Bootstrap Input Groups 


his chapter explains about one more feature Bootstrap supports, the Input Groups. Input groups are 


extended Form Controls. Using input groups you can easily prepend and append text or buttons to text-based 
inputs. 


By adding prepended and appended content to an input field, you can add common elements to the user's input. 
For example, you can add the dollar symbol, the ( for a Twitter username, or anything else that might be common 
for your application interface. 


To prepend or append elements to a .form-control: 
e Wrap itin a <div> with class .input-group 


e As a next step, within that same <div> , place your extra content inside a <span> with class.input-group- 
addon. 


e Now place this <span> either before or after the <input> element. 


For cross browser compatibility, avoid using «select» elements here as they cannot be fully styled in WebKit 
browsers. Also do not apply input group classes directly to form groups. An input group is an isolated component. 


Basic Input Group 
Following examples demonstrates basic input group: 


<div style="padding: 100px 100px 10px;"> 
«form class="bs-example bs-example-form" role="form"> 
<div class="input-group"> 
<span class="input-group-addon">@</span> 
<input type="text" class="form-control" placeholder="twitterhandle"> 
</div> 
<br> 


<div class="input-group"> 
<input type="text" class="form-control"> 
<span class="input-group-addon">.00</span> 

</div> 

<br> 

<div class="input-group"> 
<span class="input-group-addon">$</span> 
<input type="text" class="form-control"> 
<span class="input-group-addon">.00</span> 
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SE 
</form> 
<div> 


00 


Input Group Sizing 
You can change the size of the input groups, by adding the relative form sizing classes like .input-group-lg, input- 
group-sm, input-group-xs to the .input-group itself. The contents within will automatically resize. 


Following examples demonstrates this: 


<div style="padding: 100px 100px 10px;"> 
<form class="bs-example bs-example-form" 
<div class="input-group input-group-lg"> 
<span class="input-group-addon">@</span> 
<input type="text" class="form-control" placeholder="Twitterhandle"> 


</div><br> 


role="form"> 


<div class="input-group"> 
<span class="input-group-addon">@</span> 
<input type="text" class="form-control" placeholder="Twitterhandle"> 


</div><br> 
<div class="input-group input-group-sm"> 


<span class="input-group-addon">@</span> 
<input type="text" class="form-control" placeholder="Twitterhandle"> 


daos 
«/form» 
«/div» 


Checkboxes and radio addons 


You can preappend or append radio buttons and checkboxes instead of text as demonstrated in the following 
example: 


<div style="padding: 100px 100px 10px;"> 
<form class="bs-example bs-example-form" 
<div class="row"> 
<div class-"col-1g-6"» 


role="form"> 


TUTORIALS POINT 
Simply Easy Learning 


<div class="input-group"> 
<span class="input-group-addon"> 
<input type="checkbox"> 
</span> 
<input type="text" class="form-control"> 
«fdiv5«le- Junput-group ==> 
</diyoxl==. fcolelg-6 ==><br> 
<div class="col-lg-6"> 
<div class="input-group"> 
<span class="input-group-addon"> 
<input type="radio"> 


</span> 
<input type="text" class="form-control"> 
</dive<!== /input=-group. ==> 
</diy><!== /.col=lg=6 ==> 
«/div»«!-- /.row --» 
«/form» 
«/div» 


Button addons 


You can even preappend or append buttons in input groups. Instead of .input-group-addon class, you'll need to 
use class .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be 


overridden. Following examples demonstrates this: 


«div style-"padding: 100px 100px 10px;"» 
«form class="bs-example bs-example-form" role="form"> 
<div class="row"> 
<div class="col-lg-6"> 
<div class="input-group"> 
<span class="input-group-btn"> 
<button class="btn btn-default" type="button"> 
Go! 
</button> 
</span> 
<input type="text" class="form-control"> 
</diy><l== /input-groüp ==> 
x/div><l== /.col=1g=6 ==><br> 
<div class="col-lg-6"> 
<div class="input-group"> 
<input type="text" class="form-control"> 
<span class="input-group-btn"> 
button class="btn btn-default" type="button"> 


Go! 
</button> 
</span> 
</div><!-- /input-group --> 
<diva<l==  col=1g=s6 ==> 
Ef diyselee LOW ==> 
</form> 
</div> 
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Go! 
Go! 


Buttons with dropdowns 


Adding button with dropdown menus in input groups can be done by simply wrapping the button and dropdown 
menu in a .input-group-btn class as demonstrated in the following example: 


<div style="padding: 100px 100px 10px;"> 
<form class="bs-example bs-example-form" role="form"> 
<div class="row"> 
<div class="col-lg-6"> 
<div class="input-group"> 
<div class="input-group-btn"> 
<button type="button" class="btn btn-default 
dropdown-toggle" data-toggle="dropdown"> 
DropdownMenu 
<span class="caret"></span> 
</button> 
<ul class="dropdown-menu"> 
<li><a href="#">Action</a></li> 
<li><a href="#">Another action</a></li> 
<li><a href="#">Something else here</a></1li> 
<li class-"divider"»«/li» 
<li><a href="#">Separated link</a></1li> 
</ul> 
<(divecl== /ptn=group: ==> 
<input type="text" class="form-control"> 
«fdiv5«l-- /input-group ==> 
«/diy»«le- /.col=1g=6 ==><br> 
<div class="col-lg-6"> 
<div class="input-group"> 
<input type="text" class="form-control"> 
<div class="input-group-btn"> 
<button type="button" class="btn btn-default 
dropdown-toggle" data-toggle="dropdown"> 
DropdownMenu 
<span class="caret"></span> 
</button> 
<ul class="dropdown-menu pull-right"> 
<li><a href="#">Action</a></1li> 
<li><a href="#">Another action</a></1li> 
<li><a href="#">Something else here</a></1li> 
<li class="divider"></1i> 
<li><a href="#">Separated link</a></1li> 
</ul> 
€«fdivoecl-- /btn-group ==> 
</div><!== /rnput-group ==> 
cfaigsecl-e (.col=1g=¢: ==> 
<paru><==> Jiron ==> 
</form> 
</div> 
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DropdownMenu + 


DropdownMenu ~ 


Segmented buttons 


To segment button dropdowns in input groups, use the same general style as the dropdown button but add a 
primary action along with the dropdown as can be seen in the following example: 


<div style="padding: 100px 100px 10px;"> 
«form class="bs-example bs-example-form" role="form"> 
<div class="row"> 
«div class="eol=lg=6"> 
<div class="input-group"> 
<div class="input-group-btn"> 
<button type="button" class="btn btn-default" 
tabindex="-1">Dropdwon Menu 
</button> 
<button type="button" class="btn btn-default 
dropdown-toggle" data-toggle="dropdown" tabindex="-1"> 
<span class="caret"></span> 
<span class="sr-only">Toggle Dropdown</span> 
</button> 
<ul class="dropdown-menu"> 
<li><a href="#">Action</a></li> 
<li><a href="#">Another action</a></1li> 
<li><a href="#">Something else here</a></1li> 
<li class-"divider"»«/li» 
<li><a href="#">Separated link</a></1li> 
</a> 
</dive<!== /btn=grotp ==> 
<input type="text" class="form-control"> 
</div><!== /input-group ==> 
x/gdrve«le- Y .col=lg=6 ==><br> 
<div class="col-lg-6"> 
<div class="input-group"> 
<input type="text" class="form-control"> 
<div class="input-group-btn"> 
<button type="button" class="btn btn-default" 
tabindex="-1">Dropdwon Menu 
</button> 
<button type="button" class="btn btn-default 
dropdown-toggle" data-toggle="dropdown" tabindex="-1"> 
<span class="caret"></span> 
<span class="sr-only">Toggle Dropdown</span> 
</button> 
<ul class="dropdown-menu pull-right"> 
<li><a href="#">Action</a></1li> 
<li><a href="#">Another action</a></1li> 
<li><a href="#">Something else here</a></1li> 
<li class="divider"></1i> 
<li><a href="#">Separated link</a></1li> 
sut 
</div><!== /btn-group ==> 
<div> <l== Irnputegroup ==> 
«Jdayset-e /.col-lg=6 ==> 
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EE DON ==> 
</form> 
<div> 
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Bootstrap Navigation Elements 


n this chapter we will discuss about how Bootstrap provides a few different options for styling navigation 


elements. All of them share the same markup and base class, .nav. Bootstrap also provides a helper class, to 
share markup and states. Swap modifier classes to switch between each style. 


Tabular Navigation or Tabs 
To create a tabbed navigation menu: 


e Start with a basic unordered list with the base class of .nav 
e Add class .nav-tabs. 


Following example demonstrates this: 


<p>Tabs Example</p> 
<ul class="nav nav-tabs"> 
<li class="active"><a href="#">Home</a></1li> 
<li><a href="#">SVN</a></1li> 
<li><a href="#">10S</a></1li> 
<li><a href="#">VB.Net</a></li> 
<li><a href="#">Java</a></1li> 
<li><a href="#">PHP</a></li> 
</ul> 


Tabs Example 


Home SVN IS VB.Net java PHP 


Pills Navigation 
BASIC PILLS 


To turn the tabs into pills, follow the same steps as above, use the class .nav-pills instead of .nav-tabs. 


Following example demonstrates this: 


<p>Pills Example</p> 
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<ul class="nav nav-pills"> 
«li class="active"><a href="#">Home</a></li> 
<li><a href="#">SVN</a></1i> 
<li><a href="#">i0S</a></1li> 
<li><a href="#">VB.Net</a></li> 
<li><a href="#">Java</a></1li> 
<li><a href="#">PHP</a></1li> 
</ul> 


Pills Example 


SVN ¡OS VB.Net Java PHP 


VERTICLE PILLS 


You can stack the pills vertically using the class .nav-stacked alongwith classes .nav, .nav-pills. 


Following example demonstrates this: 


<p>Vertical Pills Example</p> 
<ul class="nav nav-pills nav-stacked"> 
«li class="active"><a href="#">Home</a></li> 
<li><a href="#">SVN</a></1li> 
<li><a href="#">i0S</a></1li> 
<li><a href="#">VB.Net</a></li> 
<li><a href="#">Java</a></1li> 
<li><a href="#">PHP</a></li> 
</ul> 


Vertical Pills Example 


Java 


PHP 


Justified Nav 


You can make tabs or pills equal widths of their parent at screens wider than 768px using class .nav- 
justified alongwith .nav, .nav-tabs or .nav, .nav-pills respectively. On smaller screens, the nav links are stacked. 


Following example demonstrates this: 


<p>Justified Nav Elements Example</p> 
<ul class="nav nav-pills nav-justified"» 
<li class="active"><a href="#">Home</a></1li> 
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<li><a href="#">SVN</a></1li> 
<li><a href="#">i0S</a></li> 
<li><a href="#">VB.Net</a></li> 
<li><a href="#">Java</a></li> 
<li><a href="#">PHP</a></li> 
</ul><br><br><br> 


<ul class="nav nav-tabs nav-justified"» 
«li class="active"><a href="#">Home</a></1li> 
<li><a href="#">SVN</a></1li> 
<li><a href="#">10S</a></1li> 
<li><a href="#">VB.Net</a></li> 
<li><a href="#">Java</a></1li> 
<li><a href="#">PHP</a></li> 
«ub» 


Justified Nav Elements Example 


SUN os VB.Net Java PHP 


Home SVN Os VB.Net Java PHP 


Disabled Links 


For each of the .navclasses, if you add the .disabled class, it will create a gray link that also disables 
the :hover state as shown in the following example: 


<p>Disabled Link Example</p> 
<ul class="nav nav-pills"> 
<li class="active"><a href="#">Home</a></1li> 
<li><a href="#">SVN</a></li> 
«li class="disabled"><a href="#">i0S (disabled link) </a></1li> 
<li><a href="#">VB.Net</a></1li> 
<li><a href="#">Java</a></1li> 
<li><a href="#">PHP</a></li> 
SE beer 


<ul class="nav nav-tabs"> 
<li class="active"><a href="#">Home</a></1li> 
<li><a href="#">SVN</a></1li> 
<li><a href="#">10S</a></1li> 
«li class="disabled"><a href="#">VB.Net (disabled link) </a></1li> 
<li><a href="#">Java</a></1li> 
<li><a href="#">PHP</a></li> 
</ul> 
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Disabled Link Example 


SVN VB.Net Java PHF 


Home SVN OS Java PHP 


This class will only change the <a>'s appearance, not its functionality. Use custom JavaScript to disable links here. 


DROPDOWNS 


Navigation menus share a similar syntax with dropdown menus. By default, you have a list item that has an anchor 
working in conjunction with some data-attributes to trigger an unordered list with a.dropdown-menu class. 


TABS WITH DROPDOWNS 
To add dropdowns to tab: 
e Start with a basic unordered list with the base class of .nav 


e Add class .nav-tabs. 
e Now add an unordered list with a .dropdown-menu class. 


<p>Tabs With Dropdown Example</p> 
<ul class="nav nav-tabs"> 
<li class="active"><a href="#">Home</a></1li> 
<li><a href="#">SVN</a></1li> 
<li><a href="#">i0S</a></1li> 
<li><a href="#">VB.Net</a></1li> 
<li class="dropdown"> 
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
Java <span class="caret"></span> 
</a> 
<ul class="dropdown-menu"> 
<li><a href="#">Swing</a></li> 
<li><a href="#">jMeter</a></li> 
<li><a href="#">EJUB</a></1li> 
<li class-"divider"»«/li» 
<li><a href="#">Separated link</a></1li> 
</ul> 
KILIS 
<li><a href="#">PHP</a></li> 
eful 
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Tabs With Dropdown Example 


Home SVN Os VB.Net Java ~ PHP 
—) 


Separated link 


PILLS WITH DROPDOWNS 


To do the same thing with pills, simply swap the .nav-tabs class with .nav-pills as shown in the following example. 


<p>Pills With Dropdown Example</p> 
«ul class="nav nav-pills"> 
<li class-"active"»«a href="#">Home</a></1li> 
<li><a href="#">SVN</a></1i> 
<li><a href="#">i0S</a></1li> 
<li><a href="#">VB.Net</a></1li> 
<li class="dropdown"> 
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
Java <span class="caret"></span> 
</a> 
<ul class="dropdown-menu"> 
<li><a href="#">Swing</a></1li> 
<li><a href="#">jMeter</a></li> 
<li><a href="*">EJB</a></1i> 
<li class-"divider"»«/li» 
<li><a href="#">Separated link</a></1li> 
</ul> 
rl 
<li><a href-"4"»PHP«/a»«/li» 
<UL> 


Pills With Dropdown Example 


Home SVN ¡OS VB.Net Java + PHP 
Swing 
¡Meter 
EJB 
Separated link 
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Bootstrap Navbar 


he Navbar is a nice feature, and is one of the prominent features of Bootstrap sites. Navbars are 


responsive meta components that serve as navigation headers for your application or site. Navbars collapse in 
mobile views and become horizontal as the available viewport width increases. At its core, the navbar includes 
styling for site names and basic navigation. 


Default navbar 


To create a default navbar: 


Add classes .navbar, .navbar-default to the <nav> tag. 
Add role="navigation" to the above element, to help with accessibility. 

e Add a header class .navbar-header to the <div> element. Include an <a> element with classnavbar-brand. 
This will give the text a slightly larger size. 

e To add links to the navbar, simply add an unordered list with a classes of .nav, .navbar-nav. 


Following example demonstrates this: 


<nav class="navbar navbar-default" role="navigation"> 
<div class="navbar-header"> 
<a class-"navbar-brand" href="#">TutorialsPoint</a> 
</div> 
<div> 
<ul class="nav navbar-nav"> 
«li class-"active"»«a href-"4"»iOS«/a»«/li» 
<li><a href="#">SVN</a></1li> 
<li class="dropdown"> 
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
Java 
<b class="caret"></b> 
</a> 
<ul class="dropdown-menu"> 
<li><a href="#">jmeter</a></li> 
<li><a href="#">EUB</a></1li> 
<li><a href="#">Jasper Report«/a»«/li» 
<li class-"divider"»«/li» 
<li><a href="#">Separated link</a></1li> 
<li class-"divider"»«/li» 
<li><a href="#">One more separated link</a></1li> 
</ul> 
¿y bare 
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</ul> 
</div> 
</nav> 


Responsive navbar 


To add the responsive features to the navbar, the content that you want to be collapsed needs to be wrapped in a 
<div> with classes .collapse, .navbar-collapse. The collapsing nature is tripped by a button that has a the class 
of .navbar-toggle and then features two data- elements. The first, data-toggle, is used to tell the JavaScript what 
to do with the button, and the second, data-target, indicates which element to toggle. Three with a class of .icon- 
bar create what | like to call the hamburger button. This will toggle the elements that are in the .nav- 


collapse <div>. For this feature to work, you need to include the Bootstrap Collapse Plugin. 


Following example demonstrates this: 


<nav class="navbar navbar-default" role="navigation"> 
<div class="navbar-header"> 
<button type="button" class="navbar-toggle" data-toggle="collapse" 
data-target="#example-navbar-collapse"> 
<span class="sr-only">Toggle navigation</span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 


</button> 
<a class="navbar-brand" href="#">TutorialsPoint</a> 
</div> 
<div class="collapse navbar-collapse" id="example-navbar-collapse"> 


<ul class="nav navbar-nav"> 
<li class="active"><a href="#">i0S</a></li> 
<li><a href="#">SVN</a></1li> 
<li class="dropdown"> 
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
Java <b class="caret"></b> 
</a> 
<ul class="dropdown-menu"> 
<li><a href="#">jmeter</a></li> 
<li><a href="#">EJUB</a></1li> 
<li><a href="#">Jasper Report</a></li> 
<li class-"divider"»«/li» 
<li><a href="#">Separated link</a></1li> 
<li class-"divider"»«/li» 
<li><a href="#">One more separated link</a></1li> 
</ul> 
SS 
</ul> 
</div> 
</nav> 
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TutorialsPoint N 


Forms in navbar 


Instead of using the default class-based forms from Chapter Bootstrap Forms, forms that are in the navbar use 
the .navbar-form class. This ensures that the form’s proper vertical alignment and collapsed behavior in narrow 
viewports. Use the alignment options (explained in Component alignment section) to decide where it resides within 


the navbar content. 
Following example demonstrates this: 


<nav class="navbar navbar-default" role="navigation"> 
<div class="navbar-header"> 
<a class="navbar-brand" 
STEE 


<div> 
<form class="navbar-form navbar-left" role 


<div class="form-group"> 
<input type="text" class="form-control" placeholder="Search"> 


href="#">TutorialsPoint</a> 


="search"> 


</div> 
<button type="submit" class="btn btn-default">Submit</button> 


</form> 
</div> 
</nav> 


TutorialsPoint Submit 


Buttons in navbar 


You can add buttons using class .navbar-btn to <button> elements not residing in a <form> to vertically center 
them in the navbar. .navbar-btn can be used on <a> and <input> elements. 
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Do not use .navbar-btn nor the standard button classes on <a> elements within .navbar-nav. 


Following example demonstrates this: 


<nav class="navbar navbar-default" role="navigation"> 
<div class="navbar-header"> 
<a class="navbar-brand" href="#">TutorialsPoint</a> 
</div> 
<div> 
<form class="navbar-form navbar-left" role="search"> 
<div class="form-group"> 
<input type="text" class="form-control" placeholder="Search"> 
</div> 
<button type="submit" class="btn btn-default">Submit Button</button> 
</form> 
<button type="button" class="btn btn-default navbar-btn"> 
Navbar Button 
</button> 
</div> 
</nav> 


TutorialsPoint Submit Button Navbar Button 


Text in navbar 


To wrap strings of text in an element use class .navbar-text. This is usually used with <p> tag for proper leading 
and color. Following example demonstrates this: 


<nav class="navbar navbar-default" role="navigation"> 
<div class="navbar-header"> 
<a class="navbar-brand" href="#">TutorialsPoint</a> 
</div> 
<div> 
<p class="navbar-text">Signed in as Thomas</p> 
</div> 
</nav> 


Non-nav links 


If you want to use standard links that are not within the regular navbar navigation component, then use 
class navbar-link to add the proper colors for the default and inverse navbar options as shown in the following 
example: 


<nav class="navbar navbar-default" role="navigation"> 
<div class="navbar-header"> 
<a class="navbar-brand" href="#">TutorialsPoint</a> 
EAS 
<div> 
<p class="navbar-text navbar-right">Signed in as 
<a href="#" class="navbar-link">Thomas</a> 
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</p> 
E ves 
</div> 


TutorialsPoint Signed in as Thomas 


Component alignment 


You can align the components like nav links, forms, buttons, or textto left or right in a navbar using the utility 
classes .navbar-left or .navbar-right. Both classes will add a CSS float in the specified direction. The following 
example demonstrates this: 


<nav class="navbar navbar-default" role="navigation"> 
<div class="navbar-header"> 
<a class="navbar-brand" href="#">TutorialsPoint</a> 
</div> 
<div> 
<!--Left Align--> 
<ul class="nav navbar-nav navbar-left"> 
<li class="dropdown"> 
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
Java 
<b class="caret"></b> 
</a> 
<ul class="dropdown-menu"> 
<li><a href="#">jmeter</a></li> 
<li><a href="#">EJB</a></1li> 
<li><a href="#">Jasper Report</a></li> 
<li class="divider"></1i> 
<li><a href="#">Separated link</a></1li> 
<li class-"divider"»«/li» 
<li><a href="#">One more separated link</a></1li> 
</ul> 
</li> 
</ul> 
<form class="navbar-form navbar-left" role="search"> 
<button type="submit" class="btn btn-default"> 
Left align-Submit Button 
</button> 
</form> 
<p class="navbar-text navbar-left">Left align-Text</p> 
<!--Right Align--> 
<ul class="nav navbar-nav navbar-right"> 
<li class="dropdown"> 
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
Java <b class="caret"></b> 
</a> 
<ul class="dropdown-menu"> 
<li><a href="#">jmeter</a></1li> 
<li><a href="*">EJB</a></1i> 
<li><a href="#">Jasper Report</a></li> 
<li class-"divider"»«/li» 
<li><a href="#">Separated link</a></1li> 
<li class-"divider"»«/li» 
<li><a href="#">One more separated link</a></li> 
</ul> 
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</li> 
</ul> 
<form class="navbar-form navbar-right" role="search"> 
<button type="submit" class="btn btn-default"> 
Right align-Submit Button 


</button> 
</form> 
<p class="navbar-text navbar-right">Right align-Text</p> 
</div> 


</nav> 


Let align-Subrnit Buttice Right age-Submi Butto 


Fixed to top 


The Bootstrap navbar can be dynamic in its positioning. By default, it is a block-level element that takes its 
positioning based on its placement in the HTML. With a few helper classes, you can place it either on the top or 


bottom of the page, or you can make it scroll statically with the page. 


If you want the navbar fixed to the top, add class .navbar-fixed-top to the .navbar class. Following example 


demonstrates this: 


To prevent the navbar from sitting on top of other content in the body of the page, add at least 50 pixels of padding 


to the «body» tag or try your own values. 


«nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
<div class="navbar-header"> 
<a class="navbar-brand" href="#">TutorialsPoint</a> 
</div> 
<div> 
<ul class="nav navbar-nav"> 
«Ii class="active"><a hret="4">105</a></Li> 
<li><a href="#">SVN</a></1li> 
<li class="dropdown"> 
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
Java <b class="caret"></b> 
</a> 
<ul class="dropdown-menu"> 
<li><a href="#">jmeter</a></li> 
<li><a href="#">EJUB</a></1li> 
<li><a href="#">Jasper Report</a></li> 
<li class-"divider"»«/li» 
<li><a href="#">Separated link</a></1li> 
<li class-"divider"»«/li» 
<li><a href="#">One more separated link</a></li> 
</ul> 
ey ea 
</ul> 
</div> 
</nav> 
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Fixed to bottom 


If you want the navbar fixed to the bottom of the page, add class .navbar-fixed-bottom to the navbar class. 
Following example demonstrates this: 


<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation"> 
<div class="navbar-header"> 
<a class="navbar-brand" href="#">TutorialsPoint</a> 
</div> 
<div> 
<ul class="nav navbar-nav"> 
<li, elass="active"><a href="4">105</a></Li> 
<li><a href="#">SVN</a></1li> 
<li class="dropdown"> 
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
Java <b class="caret"></b> 
</a> 
<ul class="dropdown-menu"> 
<li><a href="#">jmeter</a></li> 
<li><a href="4">EJB</a></1i> 
<li><a href="#">Jasper Report</a></li> 
<li class-"divider"»«/li» 
<li><a href="#">Separated link</a></1li> 
<li class-"divider"»«/li» 
<li><a href="#">One more separated link</a></li> 
</ul> 
«l3 
«/ul» 
«/div» 
«/nav» 


TutorialsPoint ¡OS VN va a 


Static top 


To create a navbar that scrolls with the page, add the .navbar-static-top class. This class does not require adding 
the padding to the <body>. 


<nav class="navbar navbar-default navbar-static-top" role="navigation"> 
<div class="navbar-header"> 
<a class="navbar-brand" href="#">TutorialsPoint</a> 
</div> 
<div> 
<ul class="nav navbar-nav"> 
<li class="active"><a href="#">i0S</a></li> 
<li><a href="#">SVN</a></1li> 
<li class="dropdown"> 
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
Java <b class="caret"></b> 
</a> 
<ul class="dropdown-menu"> 
<li><a href="#">jmeter</a></li> 
<li><a href=" #">EJB</a></li> 
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<li><a href="#">Jasper Report</a></li> 

«li class-"divider"»«/li» 

<li><a href="#">Separated link</a></1li> 

«li class="divider"></1i> 

<li><a href="#">One more separated link</a></1li> 

</ul> 
</li> 
</ul> 
</div> 
</nav> 


Inverted navbar 


To create an inverted navbar with a black background and white text, simply add .navbar-inverse class to 
the .navbar class as demonstrated in the following example: 


To prevent the navbar from sitting on top of other content in the body of the page, add at least 50 pixels of padding 
to the <body> tag or try your own values. 
<nav class="navbar navbar-inverse" role="navigation"> 
<div class="navbar-header"> 
<a class="navbar-brand" href="#">TutorialsPoint</a> 
</div> 
<div> 
<ul class="nav navbar-nav"> 
«li class="active"><a href="#">i0S</a></li> 
<li><a href="#">SVN</a></1li> 
<li class="dropdown"> 
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
Java <b class="caret"></b> 
</a> 
<ul class="dropdown-menu"> 
<li><a href="#">jmeter</a></li> 
<li><a href="#">EJB</a></1li> 
<li><a href="#">Jasper Report</a></li> 
«li class-"divider"»«/li» 
<li><a href="#">Separated link</a></1li> 
<li class-"divider"»«/li» 
<li><a href="#">One more separated link</a></1li> 
</ul> 
SE 
</ul> 
</div> 
</nav> 
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Bootstrap Breadcrumb 


readcrumbs are a great way to show hierarchy-based information for a site. In the case of blogs, 


breadcrumbs can show the dates of publishing, categories, or tags. They indicate the current page's location within 
a navigational hierarchy. 


A breadcrumb in Bootstrap is simply an unordered list with a class of .breadcrumb. The separator is automatically 
added by CSS (bootstrap.min.css) through the following class: 


.breadcrumb > li + li:before { 
Colors ` ale 
content Uy o 
packllibags (0) sec 

} 


Following example demonstrates breadcrumbs: 


<ol class="breadcrumb"> 
<li><a href="#">Home</a></1li> 
<li><a href="#">2013</a></1li> 
<li class="active">November</1i> 
</ol> 
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Bootstrap Pagination 


his chapter discusses about pagination feature Bootstrap supports. Pagination, an unordered list is 


handled by Bootstrap like a lot of other interface elements. 


Sample code 


<ul class="pagination"> 
<li><a href="#">&laquo;</a></1li> 
<li><a href="#">1</a></li> 


<ul class="pagination"> 

<li class="disabled"><a 
href="#">&laquo; </a></1li> 

<li class="active"><a href="*">1<span 
class tsir 
only"»(current)«/span»«/a»«/li» 


«ul class-"pagination pagination- 
US qr IMP 
EE 


Pagination 

The following table lists the classes Bootstrap provides to handle pagination. 
Class Description 
pagination Add this class to get the 

pagination on your page. 

You can customize links by 
disabled, using.disabled for unclickable 
.active links and .activeto indicate the 

current page. 
Wed Use these classes to get 
pud different size items. 


DEFAULT PAGINATION 


«ul class-"pagination pagination- 
SSmi oo AUN 


Following example demonstrates the use of class .pagination discussed in the above table: 


«ul class-"pagination"» 
<li><a href-"f"»5&laquo;«/a»«/li» 
<li><a href="*">1</a></1i> 
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<li><a href="#">2</a></1li> 

<li><a href="#">3</a></1li> 

<li><a href="#">4</a></1li> 

<li><a href="#">5</a></1i> 

<li><a href="#">é&raquo;</a></1li> 
<ul> 


STATES 


Following example demonstrates the use of class .disabled, .active discussed in the above table: 


<ul class="pagination"> 
<li><a href-"f"»5&laquo;«/a»«/li» 
«li class-"active"»«a href="#">1</a></li> 
«li class="disabled"><a href="*">2</a></1i> 
<li><a href="4">3</a></1i> 
<li><a href="#">4</a></1i> 
<li><a href="#">5</a></1li> 
<li><a href="#">&raquo;</a></1li> 
ul> 


a 


SIZING 


Following example demonstrates the use of classes for sizing, .pagination-* discussed in the above table: 


<ul class="pagination pagination-lg"> 


<li><a href="#">&laquo;</a></1li> 
<li><a href="$">1</a></1li> 
<li><a href="#">2</a></1li> 
<li><a href="#">3</a></1li> 
<li><a href="#">4</a></1li> 
<li><a href="#">5</a></1li> 
<li><a href="#">&raquo;</a></1li> 

</ul><br> 

<ul class="pagination"> 
<li><a href="#">&laquo;</a></1i> 
<li><a href=" ></a> Li> 
<li><a href="#">2</a></li> 
<li><a href="#">3</a></li> 
<li><a href="#">4</a></li> 
<li><a href="#">5</a></1i> 
<li><a href="#">é&raquo;</a></1li> 

</ul><br> 

<ul class="pagination pagination-sm"> 
<li><a href="#">&laquo;</a></1li> 
<li><a href="#">1</a></1i> 
<li><a href="#">2</a></1li> 
<li><a href="#">3</a></1li> 
<li><a href="#">4</a></1i> 
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<li><a href="#">5</a></1li> 
<li><a href="#">&raquo;</a></1li> 
</ul> 


Pager 


If you need to create simple pagination links that go beyond text, the pager can work quite well. Like the pagination 
links, the pager is an unordered list. By default the links are centered. The following table lists the classes 


Bootstrap provides for pager. 


Class Description 

ager Add this class to get the pager 
-pag links. 
.previous, Use class .previous to left align 
-next and.next to right-align the links. 
"disabled Add this class to get a muted 


look. 


DEFAULT PAGER 
Following example demonstrates the use of class . 


«ul class="pager"> 
<li><a href="*+">Previous</a></1li> 
<li><a href-"f"»Next«/a»«/li» 
eut 
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Sample code 


«ul 


«ul 
E 


« 


class="pager"> 


><a mnre t Prewiouss/ds/A 
lissa hire t= "> Next </a> </A> 
E 


class="pager"> 


li class="previous"><a 
href="#">élarr; 
li class="next"><a href="#">Newer 


Older«/a»«/li» 


Grenn p «I sioe Moa 


«/u 


«ul 
É 


< 


> 


class="pager"> 


li class="previous disabled"><a 
href="#">élarr; 
li class="next"><a href="#">Newer 


Older«/a»«/li» 


cranir I sie Lal 


«/u 


> 


pager discussed in the above table: 


Previous Next 


ALIGNED LINKS 


Following example demonstrates the use of classes for alignment, .previous, .next discussed in the above table: 
<ul class="pager"> 
<li class="previous"><a href="#">&larr; Older</a></1li> 


<li class="next"><a href="#">Newer &rarr;</a></li> 
</ol> 


Older Newer 


STATES 


Following example demonstrates the use of class .disabled discussed in the above table: 


<ul class="pager"> 
<li class-"previous disabled"><a href="#">&larr; Older«/a»«/li» 
«li class="next"><a href="#">Newer &rarr;</a></li> 

</ul> 


Newer 
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Bootstrap Labels 


his chapter will discuss about Bootstrap labels. Labels are great for offering counts, tips, or other markup 


for pages. Use class .label to display labels as shown in the following example: 


<h1>Example 
<h2>Example 
<h3>Example 
<h4>Example 


You can the appearance of the labels using the modifier classes label-default, label-primary, label-success, 


Heading 
Heading 
Heading 
Heading 


<span class="label 
<span class="label 
<span class="label 
<span class="label 


label-default">Label</span></h1> 
label-default">Label</span></h2> 
label-default">Label</span></h3> 
label-default">Label</span></h4> 


Example Heading 


Example Heading 


Example Heading 
Example Heading (ETS) 


label-info, label-warning, label-danger as shown in the following example: 


<span 
<span 
<span 
<span 
<span 
<span 
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class="label 
class="label 
class="label 
class="label 
class="label 
class="label 


EH | Primary tbe [ success Lae! EE | warning tabe! J Ose abe 


label-default">Default 
label-primary">Primary 
label-success">Success 


Label</span> 
Label</span> 
Label</span> 


label-info">Info Label</span> 


label-warning">Warning 


Label</span> 


label-danger">Danger Label</span> 
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Bootstrap Badges 


his chapter will discuss about Bootstrap badges. Badges are similar to labels; the primary difference is 


that the corners are more rounded. 


Badges are mainly used to highlight new or unread items. To use badges just add <span class="badge"> to 
links, Bootstrap navs, and more. 


The following example demonstrates this: 


<a href="#">Mailbox <span class="badge">50</span></a> 


Mailbox El) 


When there are no new or unread items, badges will simply collapse via CSS's :empty selector provided no 
content exists within. 


Active nav states 


You can place badges in active states of pill and list navigations. You can achieve this by placing <span 
class="badge"> to active links, as demonstrated in the following example: 


<h4>Example for Active State in Pill </h4> 
<ul class="nav nav-pills"> 
<li class="active"><a href="#">Home <span class-"badge"»42«/span»«/a»«/li» 
<li><a href="#">Profile</a></li> 
<li><a href="#">Messages <span class="badge">3</span></a></1li> 
</ul> 
eor 
<h4>Example for Active State in navigations</h4> 
<ul class="nav nav-pills nav-stacked" style="max-width: 260px;"> 
<li class="active"> 
<a href="#"> 
<span class="badge pull-right">42</span> 
Home 
</a> 
S IS 
<li><a href="#">Profile</a></li> 
<LI> 
<a href="#"> 
<span class="badge pull-right">3</span> 
Messages 
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</a> 
</li> 
</ul> 


Example for Active State in Pill 


Profile Messages O) 


Example for Active State in navigations 


Messages o 
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Bootstrap Jumpotron 


his chapter will discuss one more feature Bootstrap supports, the Jumbotron. As the name suggest this 


component can optionally increases the size of headings and add a lot of margin for landing page content. To use 
the Jumbotron: 


e simply create a container <div> with the class of .¡umbotron. 
e In addition to a larger <h1>, the font-weight is reduced to 200px. 


The following example demonstrates this: 


<div class="container"> 
<div class-"jumbotron"» 
<hl>Welcome to landing page!</h1> 
<p>This is an example for jumbotron.</p> 
<p><a class="btn btn-primary btn-lg" role="button"> 
Learn more</a> 
</p> 
</div> 
</div> 


Welcome to landing 
page! 


This is an example for jumbotron. 


Learn more 


To get a jumbotron full width, and without rounded corners use the .jumbotron class outside all.container classes 
and instead add a .container within as shown in the following example: 
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<div class-"jumbotron"» 
<div class="container"> 
«hl»Welcome to landing page!</h1> 
<p>This is an example for jumbotron.</p> 
<p><a class="btn btn-primary btn-lg" role="button"> 
Learn more</a> 
</p> 
</div> 
</div> 


Welcome to landing 
page! 


This is an example for jumbotron. 


Learn more 
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Bootstrap Page Header 


he page header is a nice little feature to add appropriate spacing around the headings on a page. This is 


particularly helpful on a web page where you may have several post titles and need a way to add distinction to 
each of them. To use a page header, wrap your heading in a <div> with a class of.page-header: 


<div class="page-header"> 
«hl»Example page header 
<small>Subtext for header</small> 
<I> 
</div> 
<p>This is a sample text.This is a sample text.This is a sample text. 
This is a sample text.</p> 


Example page header subtext for heade: 


This is a sample text. This is a sample text. This is a sample text. This is a sample text 
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Bootstrap Thumbnails 


his chapter discusses about Bootstrap thumbnails. A lot of sites need a way to lay out images,videos,text, 


etc in a grid, and Bootstrap has an easy way to do this with thumbnails. To create thumbnails using Bootstrap: 
e Add an <a> tag with the class of .thumbnail around an image. 


e This adds four pixels of padding and a gray border. 


e On hover, an animated glow outlines the image. 
The following example demonstrates a default thumbnail: 


<div class="row"> 
<div class="col-sm-6 col-md-3"> 
<a href="#" class="thumbnail"> 
<img src="/bootstrap/images/kittens.jpg" 
alt="Generic placeholder thumbnail"> 
</a> 
</div> 
«div class-"col-sm-6 col-md-3"» 
«a href="#" class="thumbnail"> 
<img src="/bootstrap/images/kittens.jpg" 
alt="Generic placeholder thumbnail"> 
</a> 
</div> 
<div class="col-sm-6 col-md-3"> 
<a href="#" class="thumbnail"> 
<img src="/bootstrap/images/kittens.jpg" 
alt="Generic placeholder thumbnail"> 
</a> 
</div> 
<div class="c01=sm=6 ¢ol=md=3"> 
<a href="#" class="thumbnail"> 
<img src="/bootstrap/images/kittens.jpg" 
alt="Generic placeholder thumbnail"> 
</a> 
</div> 
</div> 
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Adding Custom Content 


Now that we have a basic thumbnail, it's possible to add any kind of HTML content like headings, paragraphs, or 
buttons into thumbnails. Follow the steps below: 


e Change the <a> tag that has a class of .thumbnail to a <div>. 


e Inside of that <div>, you can add anything you need. As this is a <div>, we can use the default span-based 
naming convention for sizing. 


e |f you want to group multiple images, place them in an unordered list, and each list item will be floated to the 
left. 


The following example demonstrates this: 


<div class="row"> 
<div class="col=sm=6 col=md=3"> 
<div class="thumbnail"> 
<img src="/bootstrap/images/kittens.jpg" 
alt="Generic placeholder thumbnail"> 
</div> 
<div class="caption"> 
<h3>Thumbnail label</h3> 
<p>Some sample text. Some sample text.</p> 
<p> 
<a href="#" class="btn btn-primary" role="button"> 
Button 
</a> 
<a href="#" class="btn btn-default" role="button"> 
Button 
</a> 
</p> 
</div> 
</div> 
<div class="col-sm-6 col-md-3"> 
<div class="thumbnail"> 
<img src="/bootstrap/images/kittens.jpg" 
alt="Generic placeholder thumbnail"> 
edge 
<div class="caption"> 
<h3>Thumbnail label</h3> 
<p>Some sample text. Some sample text.</p> 
<p> 
<a href="#" class="btn btn-primary" role="button"> 
Button 
</a> 
<a href="#" class="btn btn-default" role="button"> 
Button 
</a> 
</p> 
SE 
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</div> 
<div class="col-sm-6 col-md-3"> 
<div class="thumbnail"> 
<img src="/bootstrap/images/kittens.jpg" 
alt="Generic placeholder thumbnail"> 
</div> 
<div class="caption"> 
<h3>Thumbnail label</h3> 
<p>Some sample text. Some sample text.</p> 
<p> 
<a href="#" class="btn btn-primary" role="button"> 
Button 
</a> 
<a href="#" class="btn btn-default" role="button"> 
Button 
</a> 
</p> 
</div> 
</div> 
<div class="col-sm-6 col-md-3"> 
<div class="thumbnail"> 
<img src="/bootstrap/images/kittens.jpg" 
alt="Generic placeholder thumbnail"> 
</div> 
<div class="caption"> 
<h3>Thumbnail label</h3> 
<p>Some sample text. Some sample text.</p> 
<p> 
<a href="#" class="btn btn-primary" role="button"> 
Button 
</a> 
<a href="#" class="btn btn-default" role="button"> 
Button 
</a> 
</p> 
</div> 
</div> 
</div> 


Thumbnail label Thumbnail label Thumbnail label Thumbnail label 


Soma sample (eat. Some sample tex! Soma sample text, Some sample text Some sample lex! Some sample Sect Some savple text. Some sample test 


ES uno ES enda ES Volet | Baton | wn 


TUTORIALS POINT 
Simply Easy Learning 


Bootstrap Alerts 


his chapter will discuss about alerts and the classes Bootstrap provides for alerts. Alerts provide a way to 


style messages to the user. They provide contextual feedback messages for typical user actions. 


You can add an optional close icon to alert. For inline dismissal use the Alerts ¡Query plugin. 


You can add an basic alert by creating a wrapper <div> and adding a class of .alert and one of the four contextual 
classes (e.g., .alert-success, .alert-info, .alert-warning, .alert- danger). The following example demonstrates 
this: 


<div class="alert alert-success">Success! Well done its submitted.</div> 
<div class="alert alert-info">Info! take this info.</div> 

<div class="alert alert-warning">Warning ! Dont submit this.</div> 

<div class="alert alert-danger">Error ! Change few things.</div> 


Success! Well done its submitted 


into! take this info 


Error ! Change few things 


Dismissal Alerts 


To build a dismissal alert: 

e Add an basic alert by creating a wrapper <div> and adding a class of .alert and one of the four contextual 
classes (eg, .alert-success, .alert-info, .alert-warning, .alert-danger) 

e Also add optional .alert-dismissable to the above <div> class. 


e Add a close button. 
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Following example demonstrates this: 


<div class="alert alert-success alert-dismissable"> 
<button type="button" class="close" data-dismiss="alert" 
aria-hidden="true"> 
&times; 
</button> 
Success! Well done its submitted. 
</div> 
<div class="alert alert-info alert-dismissable"> 
<button type="button" class="close" data-dismiss="alert" 
aria-hidden="true"> 
&times; 
</button> 
Info! take this info. 
</div> 
<div class="alert alert-warning alert-dismissable"> 
<button type="button" class="close" data-dismiss="alert" 
aria-hidden="true"> 
&times; 
</button> 
Warning ! Dont submit this. 
</div> 
<div class="alert alert-danger alert-dismissable"> 
<button type="button" class="close" data-dismiss="alert" 
aria-hidden="true"> 
&times; 
</button> 
Error ! Change few things. 
</div> 


Be sure to use the <button> element with the data-dismiss="alert" data attribute. 


Success! Well done its submitted 


info! take this info 


Error | Change few things 


Links in Alerts 


To get links in alerts: 


e Add an basic alert by creating a wrapper <div> and adding a class of .alert and one of the four contextual 
classes (e.g., .alert-success, .alert-info, .alert-warning, .alert-danger) 
e Use the .alert-link utility class to quickly provide matching colored links within any alert. 
<div class="alert alert-success"> 
<a href="#" class="alert-link">Success! Well done its submitted.</a> 
</div> 
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<div class="alert alert-info"> 

<a href="#" class="alert-link">Info! take this info.</a> 
</div> 
<div class="alert alert-warning"> 

<a href="#" class="alert-link">Warning ! Dont submit this.</a> 
</div> 
<div class="alert alert-danger"> 

<a href="#" class="alert-link">Error ! Change few things.</a> 
</div> 


Success! Well done its submitted. 


Info! take this info. 


Warning ! Dont submit this. 


Error ! Change few things. 
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Bootstrap Progress Bars 


his chapter discusses about Bootstrap progress bars. The purpose of progress bars is to show that assets 


are loading, in progress, or that there is action taking place regarding elements on the page. 


Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not 
supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations. 


Default Progress Bar 


To create a basic progress bar: 


e Adda <div> with a class of .progress. 


e Next, inside the above <div>, add an empty <div> with a class of .progress-bar. 


e Add a style attribute with the width expressed as a percentage. Say for example, style="60%"; indicates that 
the progress bar was at 60%. 


Let us see an example below: 


<div class="progress"> 
<div class="progress-bar" role="progressbar" aria-valuenow="60" 
aria-valuemin="0" aria-valuemax="100" style="width: 40%;"> 
<span class="sr-only">40% Complete</span> 
</div> 
</div> 


Alternate Progress Bar 


To create a progress bar with different styles: 


e Adda <div> with a class of .progress. 
e Next, inside the above <div>, add an empty <div> with a class of .progress-bar and classprogress-bar- 
* where * could be success, info, warning, danger. 
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e Add a style attribute with the width expressed as a percentage. Say for example, style="60%"; indicates that 
the progress bar was at 60%. 


Let us see an example below: 


<div class="progress"> 
<div class="progress-bar progress-bar-success" role="progressbar" 
aria-valuenow="60" aria-valuemin="0" aria-valuemax-"100" 
style="width: 90$;"» 
<span class="sr-only">90% Complete (Sucess)</span> 
</div> 
</div> 
<div class="progress"> 
<div class="progress-bar progress-bar-info" role="progressbar" 
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
style="width: 30$;"» 
<span class="sr-only">30% Complete (info)</span> 
</div> 
</div> 
<div class="progress"> 
<div class="progress-bar progress-bar-warning" role="progressbar" 
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
style="width: 20$;"» 
<span class="sr-only">20%Complete (warning) </span> 
</div> 
</div> 
<div class="progress"> 
<div class="progress-bar progress-bar-danger" role="progressbar" 
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
style="width: 10%;"> 
<span class="sr-only">10% Complete (danger) </span> 
</div> 
</div> 


Striped Progress Bar 


To create a striped progress bar: 


e Add a <div> with a class of .progress and .progress-striped. 


e Next, inside the above <div>, add an empty <div> with a class of .progress-bar and classprogress-bar- 
* where * could be success, info, warning, danger. 


e Add a style attribute with the width expressed as a percentage. Say for example, style="60%"; indicates that 
the progress bar was at 60%. 


Let us see an example below: 


<div class="progress progress-striped"> 
<div class="progress-bar progress-bar-success" role="progressbar" 
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aria-valuenow="60" aria-valuemin="0" aria-valuemax-"100" 
style="width: 90$;"» 
<span class="sr-only">90% Complete (Sucess)</span> 
</div> 
</div> 
<div class="progress progress-striped"> 
<div class="progress-bar progress-bar-info" role="progressbar" 
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
style="width: 30%;"> 
<span class="sr-only">30% Complete (info)</span> 
</div> 
</div> 
<div class="progress progress-striped"> 
<div class="progress-bar progress-bar-warning" role="progressbar" 
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
style="width: 20%; "> 
<span class="sr-only">20%Complete (warning)</span> 
</div> 
</div> 
<div class="progress progress-striped"> 
<div class="progress-bar progress-bar-danger" role="progressbar" 
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
style="width: 10%3;"> 
<span class="sr-only">10% Complete (danger)</span> 
</div> 
ENEE 


Animated Progress Bar 


To create an animated progress bar: 


e Add a <div> with a class of .progress and .progress-striped. Also add class .active to.progress-striped. 


e Next, inside the above <div>, add an empty <div> with a class of .progress-bar. 


e Add a style attribute with the width expressed as a percentage. Say for example, style="60%"; indicates that 
the progress bar was at 60%. 


This will animate the stripes right to left. 


Let us see an example below: 


<div class="progress progress-striped active"> 
<div class="progress-bar progress-bar-success" role="progressbar" 
aria-valuenow="60" aria-valuemin="0" aria-valuemax-"100" 
style="width: 40$;"» 
<span class="sr-only">40% Complete</span> 
</div> 
</div> 
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SS Ss SS SS WM 
Stacked Progress Bar 


You can even stack multiple progress bars. Place the multiple progress bars into the same .progressto stack them 
as seen in the following example: 


<div class="progress"> 
<div class="progress-bar progress-bar-success" role="progressbar" 
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
style="width: 40$;"» 
<span class="sr-only">40% Complete</span> 
</div> 
<div class="progress-bar progress-bar-info" role="progressbar" 
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
style="width: 30%;"> 
<span class="sr-only">30% Complete (info)</span> 
</div> 
<div class="progress-bar progress-bar-warning" role="progressbar" 
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
style="width: 20$;"» 
<span class="sr-only">20%Complete (warning)</span> 
</div> 
</div> 
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Bootstrap Media Object 


his chapter discusses about Media object. These are abstract object styles for building various types of 


components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content. 
The goal of the media object is to make the code for developing these blocks of information drastically shorter. 


The goal of media objects (light markup, easy extendability) is achieved by applying classes to some simple 
markup. There are two forms to the media object: 


e „media: This class allows to float a media object (images, video, audio) to the left or right of a content block. 
e  .media-list: If you are preparing a list where the items will be part of an unordered list, use class. Useful for 
comment threads or articles lists. 


Let us see an example below of default media object: 


<div class="media"> 
<a class-"pull-left" href="#"> 
«img class-"media-object" src="/bootstrap/images/64.jpg" 
alt-"Media Object"» 
</a> 
<div class="media-body"> 
<h4 class="media-heading">Media heading</h4> 
This is some sample text. This is some sample text. 
This is some sample text. This is some sample text. 
This is some sample text. This is some sample text. 
This is some sample text. This is some sample text. 
</div> 
</div> 
<div class="media"> 
<a class="pull-left" href="#"> 
<img class="media-object" src="/bootstrap/images/64.jpg" 
alt="Media Object"> 
</a> 
<div class="media-body"> 
<h4 class="media-heading">Media heading</h4> 
This is some sample text. This is some sample text. 
This is some sample text. This is some sample text. 
This is some sample text. This is some sample text. 
This is some sample text. This is some sample text. 
<div class="media"> 
<a class="pull-left" href="#"> 
<img class="media-object" src="/bootstrap/images/64.jpg" 
alt="Media Object"> 
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</a> 
<div class="media-body"> 

<h4 class="media-heading">Media heading</h4> 
This is some sample text. This is some sample text. 
This is some sample text. This is some sample text. 
This is some sample text. This is some sample text. 
This is some sample text. This is some sample text. 

</div> 
</div> 

</div> 

</div> 


Media heading 


This is some sample text. This is some sample text. This is some sample text. This is some sample text.This 
is some sample text. This is some sample text. This is some sample text. This is some sample text 


Media heading 


This is some sample text. This is some sample text. This is some sample text. This is some sample text. This 
is some sample text. This is some sample text. This is some sample text. This is some sample text. 


Media heading 


M This is some sample text. This is some sample text. This is some sample text. This is some 
sample text. This is some sample text. This is some sample text. This is some sample text. This is 
some sample text. 


Let us see an example below of media list: 


<ul class="media-list"> 
<li class="media"> 
<a class="pull-left" href="#"> 
«img class="media-object" src="/bootstrap/images/64.jpg" 
alt="Generic placeholder image"> 
</a> 
<div class="media-body"> 
<h4 class="media-heading">Media heading</h4> 
<p>This is some sample text. This is some sample text. 
This is some sample text. This is some sample text. 
This is some sample text. This is some sample text. 
This is some sample text. This is some sample text.</p> 
<!-- Nested media object --> 
<div class="media"> 
<a class="pull-left" href="#"> 
«img class-"media-object" src="/bootstrap/images/64.jpg" 
alt="Generic placeholder image"> 
</a> 
<div class="media-body"> 
<h4 class="media-heading">Nested media heading</h4> 
This is some sample text. This is some sample text. 
This is some sample text. This is some sample text. 
This is some sample text. This is some sample text. 
This is some sample text. This is some sample text. 
<!-- Nested media object --> 
<div class="media"> 
<a class="pull-left" href="#"> 
<img class-"media-object" src="/bootstrap/images/64.jpg" 
alt="Generic placeholder image"> 
</a> 
<div class="media-body"> 
<h4 class="media-heading">Nested media heading</h4> 
This is some sample text. This is some sample text. 
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This is some sample text. This is some sample text. 
This is some sample text. This is some sample text. 
This is some sample text. This is some sample text. 


</div> 
</div> 
Sf Oe 
«/div» 
«!-- Nested media object --> 


<div class="media"> 
<a class="pull-left" href="#"> 
«img class-"media-object" src="/bootstrap/images/64.jpg" 
alt="Generic placeholder image"» 
«/a» 
«div class-"media-body"» 
<h4 class="media-heading">Nested media heading</h4> 
This is some sample text. This is some sample text. 
This is some sample text. This is some sample text. 
This is some sample text. This is some sample text. 
This is some sample text. This is some sample text. 
</div> 
</div> 
</div> 
</li> 
<li class="media"> 
<a class="pull-right" href="#"> 
«img class-"media-object" src="/bootstrap/images/64.jpg" 
alt="Generic placeholder image"> 
</a> 
<div class="media-body"> 
<h4 class="media-heading">Media heading</h4> 
This is some sample text. This is some sample text. 
This is some sample text. This is some sample text. 
This is some sample text. This is some sample text. 
This is some sample text. This is some sample text. 


</div> 
La 
</ul> 
Media heading 
M This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is 
some sample text. This is some sample text. This is some sample text. This is some sample text. 
Nested media heading 
M This is some sample text. This is some sample text. This is some sample text. This is some sample 
text. This is some sample text. This is some sample text. This is some sample text. This is some 
sample text. 
Nested media heading 
This is some sample text. This is some sample text. This is some sample text. This is 
some sample text.This is some sample text. This is some sample text. This is some 
sample text. This is some sample text. 
Nested media heading 
~ This is some sample text. This is some sample text. This is some sample text. This is some sample 
text. This is some sample text. This is some sample text. This is some sample text. This is some 
sample text 
Media heading d 
This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is v 


some sample text. This is some sample text. This is some sample text. This is some sample text. 
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Bootstrap List Group 


n this article we will study about list group. Purpose of list group component is to render complex and 


customized content in lists. To get a basic list group: 


e Add the class .list-group to element <ul>. 
e Add class .list-group-item to <li>. 


Following example demonstrates this: 


<ul class="list-group"> 


«li 
«li 
«li 
SE 
<LL 
«y ul 


class-"list-group-item"»Free Domain Name Registration«/li» 
class="list-group-item">Free Window Space hosting</1li> 
class-"list-group-item"»Number of Images«/li» 
class-"list-group-item"»24*7 support«/li» 
class="list-group-item">Renewal cost per year</li> 

Free Domain Name Registration 

Free Window Space hosting 

Number of Images 


24*7 support 


Renewal cost per year 


Adding Badges to List Group 


We can add the badges component to any list group item and it will automatically be positioned on the right. Just 
add «span class="badge"> within the <li> element. Following example demonstrates this: 


«ul class-"list-group"» 


eb 


class-"list-group-item"»Free Domain Name Registration«/li» 
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<li class="list-group-item">Free Window Space hosting</li> 
<li class="list-group-item">Number of Images</li> 
<li class="list-group-item"> 

<span class="badge">New</span> 

24*7 support 
E E 
«li class="list-group-item">Renewal cost per year«/li» 
<li class="list-group-item"> 

<span class="badge">New</span> 

Disocunt Offer 
</li> 

<ul> 


Free Domain Name Registration 
Free Window Space hosting 


Number of Images 


24*7 support ( New | 


Renewal cost per year 


Disocunt Offer Co 


Linking List Group Items 


By using anchor tags instead of list items, we can link the list groups. We need to use <div> instead of <ul> 
element. Following example demonstrates this: 


«a href="#" class-"list-group-item active"> 
Free Domain Name Registration 
«/a» 
«a href="#" class="list-group-item">24*7 support</a> 
<a href="#" class="list-group-item">Free Window Space hosting</a> 
<a href="#" class="list-group-item">Number of Images</a> 
<a href="#" class-"list-group-item"»Renewal cost per year</a> 
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Free Domain Name Registration 


24*7 support 
Free Window Space hosting 
Number of Images 


Renewal cost per year 


Add Custom Content to List Group 


We can add any HTML content to the above linked list groups. Following example demonstrates this: 


«div class-"list-group"» 
«a href="#" class-"list-group-item active"> 
<h4 class="list-group-item-heading"> 
Starter Website Package 
«/h4» 
«/a» 
«a href="#" class-"list-group-item"» 
Xh4 class="list-group-item-heading"> 
Free Domain Name Registration 
«/h4» 
Xp class-"list-group-item-text"» 
You will get a free domain registration with website pages. 
</p> 
far 
<a href="#" class="list-group-item"> 
<h4 class="list-group-item-heading"> 
24*7 support 
«/h4» 
Xp class-"list-group-item-text"» 
We provide 24*7 support. 
</p> 
</a> 
</div> 
<div class="list-group"> 
<a href="#" class="list-group-item active"> 
<h4 class="list-group-item-heading"> 
Business Website Package 
«/h4» 
</a> 
«a href="#" class-"list-group-item"» 
<h4 class="list-group-item-heading"> 
Free Domain Name Registration 
«/h4» 
Xp class-"list-group-item-text"» 
You will get a free domain registration with website pages. 
</p> 
</a> 
<a href="#" class-"list-group-item"» 
<h4 class="list-group-item-heading">24*7 support</h4> 
<p class="list-group-item-text">We provide 24*7 support.</p> 
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</a> 
GE 


Starter Website Package 


Free Domain Name Registration 
You will get a free domain nae registration with website pages. 


24'7 support 
We provide 24°7 support. 


Business Website Package 


Free Domain Name Registration 
You will get a free domain nae registration with website pages. 


24*7 support 
We provide 24*7 support. 
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Bootstrap Panels 


his chapter will discuss about Bootstrap panels. Panel component are used when you want to put your 


DOM component in a box. To get a basic panel, just add class .panel to the <div> element. Also add class .panel- 
default to this element as shown in the following example: 


<div class="panel panel-default"> 
<div class="panel-body"> 
This is a Basic panel 
</div> 
</div> 


This is a Basic panel 


Panel with heading 


There are two ways to add panel heading: 


e Use .panel-heading class to easily add a heading container to your panel. 
e Use any <h1>-<h6> with a .panel-title class to add a pre-styled heading. 


Following example demonstrates both the ways: 


<div class="panel panel-default"> 
<div class="panel-heading"> 
Panel heading without title 
KIAIN? 
<div class="panel-body"> 
Panel content 
S gr 
«/div» 


<div class="panel panel-default"> 
<div class="panel-heading"> 
<h3 class="panel-title"> 
Panel With title 
Eu 
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</div> 
<div class="panel-body"> 
Panel content 
edv 
«/div» 


Panel heading without title 


Panel content 


Panel With title 
Panel content 


Panel with footer 


You can add footers to panels, by wrapping buttons or secondary text in a «div» containing class.panel-footer. 
Following example demonstrates this. 


<div class="panel panel-default"> 
<div class="panel-body"> 
This is a Basic panel 
</div> 
<div class="panel-footer">Panel footer</div> 
</div> 


This is a Basic panel 


Panel footer 


Panel footers do not inherit colors and borders when using contextual variations as they are not meant to be in the 
foreground. 


Panel Contextual alternatives 


Use contextual state classes panel-primary, panel-success, panel-info, panel-warning, panel-danger, to make 
a panel more meaningful to a particular context. 


<div class="panel panel-primary"> 
<div class="panel-heading"> 
<h3 class="panel-title">Panel title</h3> 
</div> 
<div class="panel-body"> 
This is a Basic panel 
</div> 
</div> 
<div class="panel panel-success"> 
<div class="panel-heading"> 
<h3 class="panel-title">Panel title</h3> 
</div> 
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<div class="panel-body"> 
This is a Basic panel 
</div> 
cf 
<div class="panel panel-info"> 
<div class="panel-heading"> 
<h3 class="panel-title">Panel title</h3> 
</div> 
<div class="panel-body"> 
This is a Basic panel 
</div> 
</div> 
<div class="panel panel-warning"> 
<div class="panel-heading"> 
<h3 class="panel-title">Panel title</h3> 
</div> 
<div class="panel-body"> 
This is a Basic panel 
</div> 
</div> 
<div class="panel panel-danger"> 
<div class="panel-heading"> 
<h3 class="panel-title">Panel title</h3> 
</div> 
<div class="panel-body"> 
This is a Basic panel 


</div> 
<Jdiv> 
rage 
This is a Basic panel 
Panel title 
This is a Basic panel 
Panel title 


This is a Basic panel 


This is a Basic panel 


Panel title 


This is a Basic panel 


Panel with tables 


To get a non-bordered table within a panel, use class .table within the panel. Suppose there is a <div> 
containing .panel-body, we add an extra border to the top of the table for separation. If there is no <div> 
containing .panel-body, then the component moves from panel header to table without interruption. 
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Following example demonstrates this: 


<div class="panel panel-default"> 
<div class="panel-heading"> 
<h3 class="panel-title">Panel title</h3> 
</div> 
<div class="panel-body"> 
This is a Basic panel 
ef des 
«table class-"table"» 
«th»Product«/th»«th»Price «/th» 
«tr»«td»Product A</td><td>200</td></tr> 
«tr»«td»Product B«/td»«td»400«/td»«/tr» 
</table> 
</div> 
<div class="panel panel-default"> 
<div class="panel-heading">Panel Heading</div> 
<table class="table"> 
<th>Product</th><th>Price </th> 
<tr><td>Product A</td><td>200</td></tr> 
<tr><td>Product B</td><td>400</td></tr> 
</table> 
</div> 


Panel title 
This is a Basic panel 


Product 
Product A 


Product B 


Panel Heading 
Product 
Product A 


Product B 


Panel with Listgroups 


Price 


200 


You can include list groups within any panel. Create a panel by adding class .panel to the <div> element. Also add 
class .panel-default to this element. Now within this panel include your list groups. You can learn to create a list 


group from chapter List Groups. 


<div class="panel panel-default"> 
<div class="panel-heading">Panel heading</div> 
<div class="panel-body"> 


o 


P 


[This is a Basic panel content. 
</p> 

</div> 

<ul class="list-group"> 


<p>This is a Basic panel content. This is a Basic panel content. 
This is a Basic panel content.This is a Basic panel content. 
[This is a Basic panel content.This is a Basic panel content. 


<li class="list-group-item">Free Domain Name Registration</1li> 
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<li class="list-group-item">Free Window Space hosting</1li> 
<li class="list-group-item">Number of Images</1li> 
<li class="list-group-item">24*7 support«/li» 
<li class="list-group-item">Renewal cost per year</li> 
</ul> 
</div> 


Panel heading 


This is a Basic panel content. This is a Basic pane! content. This is a Basic panel content. This is a Basic panel content. This is a 
Basic panel content This is a Basic panel content. This is a Basic panel content 


Free Domain Name Registration 
Free Window Space hosting 
Number of Images 

24°7 support 


Renewal cost per year 
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Bootstrap Wells 


well is a container <div> that causes the content to appear sunken or an inset effect on the page. To 


create a well, simply wrap the content that you would like to appear in the well with a <div> containing the class 
of .well. The following example shows a default well: 


<div class="well">Hi, am in well !!</div> 


Hi, am in well !! 


Sizing 
You can change the size of well using the optional classes well-lg or well-lg. These classes are used in 
conjunction with .well class. These affect the padding, making the well larger or smaller depending on the class. 


«div class="well well-1g">Hi, am in large well !!</div> 
«div class="well well-sm">Hi, am in small well !!</div> 


Hi, am in large well !! 


Hi, am in small well !! 
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Bootstrap Plugins Overview 


he components discussed in the previous chapters under Layout Components are just the beginning. 


Bootstrap comes bundled with 12 ¡Query plugins that extend the features and can add more interaction to your 
site. To get started with Bootstrap's JavaScript plugins, you don't need to be an advanced JavaScript developer. 
By utilizing Bootstrap Data API, most of the plugins can be triggered without writing a single line of code. 


Bootstrap Plugins can be included on your site in two forms: 


e Individually: Using Bootstrap's individual *.js files. Some plugins and CSS components depend on other 
plugins. If you include plugins individually, make sure to check for these dependencies in the docs. 

e Or compiled (all at once): Using bootstrap.js or the minified bootstrap.min.js. 

Do not attempt to include both, as both bootstrap.js and bootstrap.min.js contain all plugins in a single file. 


All plugins depend on jQuery. So ¡Query must be included before the plugin files. Check bower.jsonto 
see which versions of ¡Query are supported. 


Data Attributes 


e All of the Bootstrap plugins are accessible using the included Data API. Hence, you don't need to include a 
single line of JavaScript to invoke any of the plugin features. 


e |n some situations it may be desirable to turn this functionality of Data API off. If you need to turn off the Data 
API, you can unbind the attributes by adding the following line of JavaScript: 


$ (document) .off (' .data-api') 


e To turn off a specific/single plugin, just include the plugin's name as a namespace along with the data-api 
namespace like this: 


$ (document) .off('.alert.data-api') 


Programmatic API 


The developers of Bootstrap believe that you should be able to use all of the plugins purely through the JavaScript 
API. All public APIs are single, chainable methods, and return the collection acted upon say for example: 


$(".btn.danger") .button ("toggle") .addClass ("fat") 
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All methods accept an optional options object, a string which targets a particular method, or nothing (which initiates 
a plugin with default behavior) as shown below: 


// Anitvalized with defaults 

S ("#myModal") .modal () 

// initialized with no keyboard 

$ ("#myModal") .modal({ keyboard: false }) 

// initializes and invokes show immediately 
$("£myModal").modal('show') 


Each plugin also exposes its raw constructor on a Constructor property: $.fn.popover.Constructor. If you'd like to 
get a particular plugin instance, retrieve it directly from an element: 


$('[rel=popover]').data('popover'). 


No Conflict 


Bootstrap plugins can sometimes be used with other UI frameworks. In these circumstances, namespace collisions 
can occasionally occur. To overcome this call .noConflict on the plugin you wish to revert the value of. 


// return $.fn.button to previously assigned value 
var bootstrapButton = $.fn.button.noConflict () 


// give $().bootstrapBtn the Bootstrap functionality 
$.fn.bootstrapBtn = bootstrapButton 


Events 


Bootstrap provides custom events for most plugin's unique actions. Generally, these events come in two forms: 


e Infinitive form: This is triggered at the start of an event ex: show. Infinitive events 
providepreventDefault functionality. This provides the ability to stop the execution of an action before it starts. 


$ ('fmyModal') .on('show.bs.modal', function (e) { 
// stops modal from being shown 
if (!data) return e.preventDefault () 


}) 


e Past participle form: This is triggered on the completion of an action. ex: shown 
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Bootstrap Transition Plugin 


he transition plugin provides simple transition effects. 


If you want to include this plugin functionality individually, then you will need transition.js once alongside the other 
JS files. Else, as mentioned in the chapter Bootstrap Plugins Overview, you can include bootstrap.js or the 

minified bootstrap.min.js. 

Transition.js is a basic helper for transitionEnd events as well as a CSS transition emulator. It's used by the other 
plugins to check for CSS transition support and to catch hanging transitions. 


Use cases 


A few examples of the transition plugin: 


e Sliding or fading in modals. You can find an example in the chapter Bootstrap Modal Plugin. 
e Fading out tabs. You can find an example in the chapter Bootstrap Tab Plugin. 

e Fading out alerts. You can find an example in the chapter Bootstrap Alerts. 

e Sliding carousel panes. You can find an example in the chapter Bootstrap Carousel Plugin. 
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Bootstrap Modal Plugin 


model is a child window that is layered over its parent window. Typically, the purpose is to display 


content from a separate source that can have some interaction without leaving the parent window. Child windows 
can provide information, interaction, or more. 


If you want to include this plugin functionality individually, then you will need modal.js. Else, as mentioned in the 
chapter Bootstrap Plugins Overview, you can include bootstrap.js or the minified bootstrap.min.js. 


Usage 
You can toggle the modal plugin's hidden content: 


e Via data attributes: Set attribute data-toggle="modal" on a controller element, like a button or link, along 
with a data-target="#identifier" or href="#identifier" to target a specific modal (with the id="identifier") to 
toggle. 

e Via JavaScript: Using this technique you can call a modal with id="identifier" with a single line of JavaScript: 


$('#identifier') .modal (options) 


EXAMPLE 
A static modal window example is as shown in the following example: 


<h2>Example of creating Modals with Twitter Bootstrap</h2> 
<!-- Button trigger modal ==> 
<button class="btn btn-primary btn-lg" data-toggle="modal" 
data-target="#myModal"> 
Launch demo modal 
</button> 


<le= Modal. ==> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
aria-labelledby="myModalLabel" aria-hidden="true"> 
<div class="modal-dialog"> 
<div class="modal-content"> 
<div class="modal-header"> 
<button type="button" class="close" 
data-dismiss="modal" aria-hidden="true"> 
&times; 
</button> 
<h4 class="modal-title" id="myModalLabel"> 
This Modal title 
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</h4> 
</div> 
<div class="modal-body"> 
Add some text here 
</div> 
<div class="modal-footer"> 
<button type="button" class="btn btn-default" 
data-dismiss="modal">Close 
</button> 
<button type="button" class="btn btn-primary"> 
Submit changes 


</button> 
</div> 
«/div»«!-- /.modal-content --> 
«/div»«!-- /.modal --» 


Details of the preceding code: 


e To invoke the modal window, you need to have some kind of a trigger. You can use a button or a link. Here we 
have used button. 


e |f you look in the code above, you will see that in the «button» tag, the data-target="*myModal"is the target 
of the modal that you want to load on the page. This code allows you to create multiple modals on the page 
and then have different triggers for each of them. Now, to be clear, you don't load multiple modals at the same 
time, but you can create many on the page to be loaded at different times. 


e There are two classes to take note of in the modal: 


o The first is modal, which is simply identifying the content of the <div> as a modal. 
o And second is the .fade class. When the modal is toggled, it will cause the content to fade in and out. 

e  aria-labelledbyz"myModalLabel", attribute reference the modal title. 

e The attribute aria-hiddenz"true" is used to keep the Modal Window invisible till a trigger comes (like a click 
on the associated button). 


e <div class="modal-header">, modal-header is the class to define style for the header of the modal window. 


class="close", is a CSS class close that sets style for the Close button of the modal window. 
data-dismissz'" modal", is a custom HTML5 data attribute. Here it is used to close the modal window. 
classz"modal-body", is a CSS class of Bootstrap CSS to set style for body of the modal window. 
class="modal-footer", is a CSS class of Bootstrap CSS to set style for footer of the modal window. 
data-togglez" modal", HTML5 custom data attribute data-toggle is used to open the modal window. 


This Modal title 


Add some text here 


Options 


There are certain options which can be passed via data attributes or JavaScript to customize the look and feel of 
the Modal Window. Following table lists the options: 
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Option Type/Default SES 


Name Value attribute Description 
name 
boolean a H g data- specify static for a backdrop, if you don't want the modal to be closed 
än 210 SENS backdro when the user clicks outside of the modal 
Default: true H à 
boolean data- E d l 
keyboard DEUS keyboard Closes the modal when escape key is pressed; set to false to disable. 
boolean OMS 
show Default: te data-show Shows the modal when initialized. 
Using the jQuery ./oad method, inject content into the modal body. If 
an href with a valid URL is added, it will load that content. An example 
remote path VERTS of this is shown below: 


Default: false <a data-toggle="modal" href="remote.html" data- 


target="#modal">Click me</a> 


METHODS 


The following are some useful methods which can be used with modal(). 


Method Description Example 


S(‘#identifier") modal (4 
keyboard: false 
}) 


Activates your content as a modal. Accepts 


EE an optional options object. 


Toggle:.modal(toggle) ^ Manually toggles a modal $('#identifier') .modal ('toggle') 
Show:.modal('show’) Manually opens a modal $('#identifier') .modal('show') 
Hide:.modal('hide') Manually hides a modal S('Hidentifier').modal ('hide') 
EXAMPLE 


The following example demonstrates the usage of methods: 
<h2>Example of using methods of Modal Plugin</h2> 


<!-- Button trigger modal --> 

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
Launch demo modal 

</button> 


«TL Modal ==> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
aria-labelledby="myModalLabel" aria-hidden="true"> 
<div class="modal-dialog"> 
<div class="modal-content"> 
<div class="modal-header"> 
<button type="button" class="close" data-dismiss="modal" 
aria-hidden="true">x 
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</button> 
<h4 class="modal-title" id="myModalLabel"> 
This Modal title 
</h4> 
</div> 
<div class="modal-body"> 
Press ESC button to exit. 
</div> 
<div class="modal-footer"> 
<button type="button" class="btn btn-default" 
data-dismiss="modal">Close 
</button> 
<button type="button" class="btn btn-primary"> 
Submit changes 


</button> 
</div> 
</div><!-- /.modal-content --> 
</div><!-- /.modal-dialog --> 
«/div»«l-- f.modal ==> 
<Ci pt> 
$(function () { $('#myModal') .modal ({ 


keyboard: true 


IED 
</script> 


This Modal title 


Press ESC button to exit. 


Just click the Esc button and the modal window exits. 


Events 


Following table lists the events to work with modal. These events may be used to hook into the function. 


Event Description Example 


S('fidentifier').on('show.bs.modal', 
A : E Breet AEN i 
show.bs.modal Fired after the show method is called. EE 


}) 


$('#identifier') .on('shown.bs.modal', 
itbueweiEsbeu (0) if 
MORAS ome hance 


Fired when the modal has been made 
shown.bs.modal visible to the user (will wait for CSS 


transitions to complete). T 


Fired when the hide instance method Su ütsewdentsfqecie on Chide. bs modall 7 


hide.bs.modal ^ Vos been called. function () { 
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// do something... 
}) 


S('fidentifier').on('hidden.bs.modal', 
Fired when the modal has finished nc (A 
being hidden from the user. // do something... 

}) 


hidden.bs.modal 


The following example demonstrates the usage of events: 
<h2>Example of using events of Modal Plugin</h2> 


<!-- Button trigger modal --> 

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
Launch demo modal 

</button> 


<l== Modal ==> 
<div class="modal fade" id="myModal" tabindex-"-1" role="dialog" 
aria-labelledby="myModalLabel" aria-hidden="true"> 
<div class="modal-dialog"> 
<div class="modal-content"> 
<div class="modal-header"> 
<button type="button" class="close" data-dismiss="modal" 
aria-hidden="true">x 
</button> 
<h4 class="modal-title" id="myModalLabel"> 
This Modal title 
</h4> 
</div> 
<div class="modal-body"> 
Click on close button to check Event functionality. 
</div> 
<div class="modal-footer"> 
<button type="button" class="btn btn-default" 
data-dismiss="modal"> 
Close 
</button> 
<button type="button" class="btn btn-primary"> 
Submit changes 


</button> 
<div> 
</div><!-- /.modal-content --> 
</dive<l== /.modal=dialog ==> 
</div><!-- /.modal --> 
«script 
$ (function () ( $('4myModal').modal('hide')])]); 
</script> 
K<SCript> 
$ (function () { $('#myModal') .on('hide.bs.modal', function () { 
alert('Hey, I heard you like modals...');)) 
)); 
</script> 
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Hey, | heard you like modals.. 


As seen in the above screen, if you click on the Close button i.e hide event, an alert message is displayed. 
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Bootstrap Dropdown Plugin 


he chapter Bootstrap Dropdowns covered the dropdown menu, but the interaction part was not covered 


which will be explained here. Using Dropdown plugin you can add dropdowns menus to any components like 
navbars, tabs, pills and buttons. 

If you want to include this plugin functionality individually, then you will need dropdown.js. Else, as mentioned in 
the chapter Bootstrap Plugins Overview, you can include bootstrap.js or the minified bootstrap.min.js. 


Usage 

You can toggle the dropdown plugin's hidden content: 

e Via data attributes: Add data-toggle="dropdown" to a link or button to toggle a dropdown as shown below: 
<div class="dropdown"> 


<a data-toggle="dropdown" href="#">Dropdown trigger</a> 
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> 


</a> 
</div> 


If you need to keep links intact (which is useful if the browser is not enabling JavaScript), use thedata- 
target attribute instead of href="#": 


<div class="dropdown"> 
<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" 
href="/page.html"> 
Dropdown <span class="caret"></span> 
</a> 


<ul class-"dropdown-menu" role="menu" aria-labelledby-"dLabel"» 
</ul> 
</div> 


e Via JavaScript: To call the dropdown toggle via JavaScript, use the following method: 


$ (' .dropdown-toggle') .dropdown () 
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EXAMPLE 
WITHIN NAVBAR 


The following example demonstrates usage of dropdown menu within a navbar: 


<nav class="navbar navbar-default" role="navigation"> 
<div class="navbar-header"> 
<a class="navbar-brand" href="#">TutorialsPoint</a> 
ERAN 
<div> 
<ul class="nav navbar-nav"> 
«li classs"active"»«a href="#">10S</a></1i> 
<li><a href="#">SVN</a></1li> 
<li class="dropdown"> 
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
Java 
<b class="caret"></b> 
</a> 
<ul class="dropdown-menu"> 
<li><a href="#">jmeter</a></li> 
<li><a href="*">EJB</a></1i> 
<li><a href="#">Jasper Report«/a»«/li» 
<li class-"divider"»«/li» 
<li><a href="#">Separated link</a></1li> 
<li class-"divider"»«/li» 
<li><a href="#">One more separated link</a></li> 
<i> 
<p 
«ule 
Sy avos 
«/nav» 


WITHIN TABS 


The following example demonstrates usage of dropdown menu within tabs: 


<p>Tabs With Dropdown Example</p> 
«ul class-"nav nav-tabs"> 
<li class="active"><a href="#">Home</a></1li> 
<li><a href="#">SVN</a></1li> 
<li><a href="#">i0S</a></1li> 
<li><a href="#">VB.Net</a></li> 
<li class="dropdown"> 
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
Java <span class="caret"></span> 
</a> 
<ul class="dropdown-menu"> 
<li><a href="#">Swing</a></li> 
<li><a href="#">jMeter</a></li> 
<li><a href="#">EJB</a></1li> 
<li class-"divider"»«/li» 
<li><a href="#">Separated link</a></1li> 
</ul> 
ela 
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<li><a href="#">PHP</a></li> 
</ul> 


Tabs With Dropdown Exampie 
Home SVN OS VB.Net Java + PHP 


Swing 
¡Meter 
EJB 


Separated link 


Options 


There are no options. 


Methods 


The dropdown toggle has a simple method to show or hide the dropdown. 


$ () .dropdown ('toggle') 


EXAMPLE 


The following example demonstrates use of dropdown plugin method. 


<nav class="navbar navbar-default" role="navigation"> 
<div class="navbar-header"> 


<a class="navbar-brand" href="#">TutorialsPoint</a> 
</div> 


<div id="myexample"> 
<ul class="nav navbar-nav"> 
«li class="active"><a href="#">i0S</a></li> 
<li><a href="#">SVN</a></1i> 
<li class="dropdown"> 
<a href="#" class="dropdown-toggle">Java <b 
class="caret"></b></a> 
<ul class="dropdown-menu"> 
<li><a id="action-1" href="#"> 
jmeter</a> 


ES 

<li><a href="*">EJB</a></1i> 

<li><a href="#">Jasper Report«/a»«/li» 
«li class="divider"></1li> 
së 
e 
€ 
T 


li><a href="#">Separated link</a></li> 
li class="divider"></li> 
li><a href="#">One more separated link</a></li> 


</div> 
</nav> 
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</div> 
«SOripi 
$ (function()( 
$(".dropdown-toggle").dropdown('toggle'); 
)); 
</script> 


TutorialsPoint ios SVN Java ~ 
¡meter 
EJB 
Jasper Report 


Separated link 


One more separated link 
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Bootstrap Scrolispy Plugin 


he Scrollspy (auto updating nav) plugin allows you to target sections of the page based on scroll position. 


In its basic implementation, as you scroll, you can add .active classes to the navbar based on the scroll position. 
If you want to include this plugin functionality individually, then you will need scrollspy.js. Else, as mentioned in 
the chapter Bootstrap Plugins Overview, you can include bootstrap.js or the minified bootstrap. min. je, 


Usage 
You can add scrollspy behavior to your topbar navigation: 


e Via data attributes: add data-spy="scroll" to the element you want to spy on (typically the body). Then add 
attribute data-target with the ID or class of the parent element of any Bootstrap .navcomponent. For this to 
work, you must have elements in the body of the page that have matching IDs of the links that you are spying 
on. 


<body data-spy="scroll" data-target=".navbar-example"> 


<div class="navbar-example"> 
<ul class="nav nav-tabs"> 


</ul> 
E > 
</body> 
e Via JavaScript: You can invoke the scrollspy with JavaScript instead of using the data attributes, by selecting 


the element to spy on, and then invoking the .scrollspy() function: 


$('body').scrollspy(( target: '.navbar-example' }) 


EXAMPLE 


The following example shows the use of scrollspy plugin via data attributes: 


«nav id="navbar-example" class-"navbar navbar-default navbar-static" 
role="navigation"> 
<div class="navbar-header"> 
<button class="navbar-toggle" type="button" data-toggle="collapse" 
data-target-".bs-js-navbar-scrollspy"» 
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<span class="sr-only">Toggle navigation</span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</button> 
<a class="navbar-brand" href="#">Tutorial Name</a> 
</div> 
<div class="collapse navbar-collapse bs-js-navbar-scrollspy"> 
<ul class="nav navbar-nav"> 
<li><a href="#ios">i0S</a></li> 
<li><a href="#svn">SVN</a></1li> 
<li class="dropdown"> 
<a href="#" id="navbarDrop1" class="dropdown-toggle" 
data-toggle="dropdown">Java 
<b class="caret"></b> 
</a> 
<ul class="dropdown-menu" role="menu" 
aria-labelledby="navbarDropl"> 
<li><a href="#jmeter" tabindex="-1">jmeter</a></1li> 
<li><a href="#ejb" tabindex-"-1"»ejb«/a»«/li» 
<li class-"divider"»«/li» 
<li><a href="#spring" tabindex="-1">spring</a></1li> 
</ul> 
</li> 
</ul> 
</div> 
</nav> 
<div data-spy="scroll" data-target="#navbar-example" data-offset="0" 
style="height:200px;overflow:auto; position: relative;"> 
<h4 id="ios">i08</h4> 
<p>iOS is a mobile operating system developed and distributed by Apple 
Inc. Originally released in 2007 for the iPhone, iPod Touch, and Apple 
TV. i0S is derived from OS X, with which it shares the Darwin 
foundation. iOS is Apple's mobile version of the OS X operating system 
used on Apple computers. 
</p> 
<h4 id="svn">SVN</h4> 
<p>Apache Subversion which is often abbreviated as SVN, is a software 
versioning and revision control system distributed under an open source 
license. Subversion was created by CollabNet Inc. in 2000, but now it 
is developed as a project of the Apache Software Foundation, and as 
such is part of a rich community of developers and users. 
</p> 
<h4 id="jmeter">jMeter</h4> 
<p>jMeter is an Open Source testing software. It is 100% pure Java 
application for load and performance testing. 
</p> 
<h4 id="ejb">EJB</h4> 
<p>Enterprise Java Beans (EJB) is a development architecture for building 
highly scalable and robust enterprise level applications to be deployed 
on J2EE compliant Application Server such as JBOSS, Web Logic etc. 
</p> 
<h4 id="spring">Spring</h4> 
<p>Spring framework is an open source Java platform that provides 
comprehensive infrastructure support for developing robust Java 
applications very easily and very rapidly. 
</p> 
<p>Spring framework was initially written by Rod Johnson and was first 
released under the Apache 2.0 license in June 2003. 
<p> 
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</div> 


h, and Appie TV. IOS is derived from OS X. wë 


Options 


Options can be passed via data attributes or JavaScript. Following table lists the options: 


Option Type/Default Data attribute T 
Name Value name Deseripton 

number ; Pixels to offset from top when calculating position of 
Osei Default: 10 daia onei scroll. 


Methods 


.scrollspy('refresh'): When calling the scrollspy via the JavaScript method, you need to call the .refreshmethod to 
update the DOM. This is helpful if any elements of the DOM have changed i.e if you have added or removed some 


elements. Following would be the syntax to use this method. 


$('[data-spy-"scroll"]').each(function () { 
var Sspy = $(this) .scrollspy('refresh') 


}) 


EXAMPLE 


Following example demonstrates the use of.scrollspy('refresh') method: 


«nav id="myScrollspy" class="navbar navbar-default navbar-static" 


role="navigation"> 


<div class="navbar-header"> 
<button class="navbar-toggle" type="button" data-toggle="collapse" 


data-target-".bs-js-navbar-scrollspy"» 

<span class="sr-only">Toggle navigation</span> 
<span class="icon-bar"></span> 

<span class="icon-bar"></span> 

<span class="icon-bar"></span> 


</button> 
<a class="navbar-brand" href="#">Tutorial Name</a> 


</div> 
<div class="collapse navbar-collapse bs-js-navbar-scrollspy"> 


<ul class="nav navbar-nav"> 
«li cláass="active"><a href-"$ios"»108«/a»«/li» 


<li><a href="*svn">SVN</a></1i> 


<li class="dropdown"> 
<a href="#" id="navbarDrop1" class="dropdown-toggle" 


data-toggle="dropdown">Java 
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<b class="caret"></b> 
</a> 
<ul class="dropdown-menu" role="menu" 
aria-labelledby="navbarDrop1"> 
<li><a href="#jmeter" tabindex="-1">jmeter</a></1li> 
<li><a href="#ejb" tabindex-"-1"»ejb«/a»«/li» 
«li class-"divider"»«/li» 
<li><a href="#spring" tabindex="-1">spring</a></1li> 
</ul> 
«fli 
«/ul» 
«/div» 
</nav> 
<div data-spy="scroll" data-target="#myScrollspy" data-offset="0" 
style="height:200px;overflow:auto; position: relative;"> 
<div class="section"> 
<h4 id-"ios"»iOS«small»«a href="#" onclick="removeSection(this);"> 
&times; Remove this section</a></small> 
</n4> 
<p>i0S is a mobile operating system developed and distributed by 
Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and 
Apple TV. iOS is derived from OS X, with which it shares the Darwin 
foundation. iOS is Apple's mobile version of the OS X operating system 
used on Apple computers.</p> 
</div> 
<div class="section"> 
<h4 id="svn">SVN<small></small></h4> 
<p>Apache Subversion which is often abbreviated as SVN, is a software 
versioning and revision control system distributed under an open source 
license. Subversion was created by CollabNet Inc. in 2000, but 
now it is developed as a project of the Apache Software Foundation, 
and as such is part of a rich community of developers and users.</p> 
</div> 
<div class="section"> 
<h4 id="jmeter">jMeter<small><a href="#" onclick="removeSection (this) ;"> 
&times; Remove this section</a></small> 
</n4> 
<p>jMeter is an Open Source testing software. It is 100% pure Java 
application for load and performance testing.</p> 
</div> 
<div class="section"> 
<h4 id="ejb">EJB</h4> 
<p>Enterprise Java Beans (EJB) is a development architecture for 
building highly scalable and robust enterprise level applications 
to be deployed on J2EE compliant Application Server such as 
JBOSS, Web Logic etc.</p> 


</div> 
<div class="section"> 
<h4 id="spring">Spring</h4> 
<p>Spring framework is an open source Java platform that provides 
comprehensive infrastructure support for developing robust Java 
applications very easily and very rapidly.</p> 
<p>Spring framework was initially written by Rod Johnson and was first 
released under the Apache 2.0 license in June 2003.</p> 
</div> 
</div> 
<script type="text/javascript"> 
$ (function () { 


removeSection = function(e) { 
$ (e) .parents (".section") .remove (); 
$('[data-spy="scroll"]').each(function () { 
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var $spy = $(this).scrollspy('refresh') 
)); 


} 
$("#myScrollspy") .scrollspy(); 


)); 
</script> 


Remove the sections to see the effect of refresh method. Bootstrap adjusts the highlighting for the remaining elements 


Tutorial Name ios SVN UE 


iOS. homo 


iOS is a mobie operating system developed and distributed by Apple inc. Originally released in 2007 for the iPhone, iPod Touch, and Apple 
TV. iOS is derived from OS X, with which il shares the Darwin foundation. iOS is Apple's mobile version of the OS X operating system used on 
Apple computers 


SVN 


Apache Subversion which is often abbreviated as SVN, is a software versioning and revision control system distributed under an open source 
icense. Subversion was created by CofabNet Inc. in 2000, but now it is developed as a project of the Apache Software Foundabon, and as 
such is part of a nch community of developers and users. 


Events 


Following table lists the events to work with scrollspy. This event may be used to hook into the function. 


Event Description Example 
This event fires $('#myScrollspy') .on('activate.bs.scrollspy', 
SE whenever a new item function () { 
da HN becomes activated by // do something... 
the scrollspy. }) 


EXAMPLE 


Following example demonstrates the use ofactivate.bs.scrollspy event: 


<nav id="myScrollspy" class="navbar navbar-default navbar-static" 
role="navigation"> 
<div class="navbar-header"> 
<button class="navbar-toggle" type="button" data-toggle="collapse" 
data-target=".bs-js-navbar-scrollspy"> 
<span class="sr-only">Toggle navigation</span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</button> 
<a class="navbar-brand" href="#">Tutorial Name</a> 
</div> 
<div class="collapse navbar-collapse bs-js-navbar-scrollspy"> 
<ul class="nav navbar-nav"> 
«li class="active"><a href="#ios">i0S</a></1li> 
<li><a href="#svn">SVN</a></li> 
<li class="dropdown"> 
<a href="#" id-"navbarDropl" class="dropdown-toggle" 
data-toggle="dropdown"> 
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Java <b class="caret"></b> 
</a> 
<ul class="dropdown-menu" role="menu" 
aria-labelledby="navbarDrop1"> 
<li><a href="#jmeter" tabindex="-1">jmeter</a></1li> 
<li><a href="#ejb" tabindex-"-1"»ejb«/a»«/li» 
«li class-"divider"»«/li» 
<li><a href="#spring" tabindex="-1">spring</a></1li> 
</ul> 
</li> 
</ul> 
</div> 
</nav> 
<div data-spy="scroll" data-target="#myScrollspy" data-offset="0" 
style="height :200px;overflow:auto; position: relative;"> 
<div class="section"> 
<h4 id-"ios"»iOS«small»«a href="#" onclick="removeSection (this) ;"> 
&times; Remove this section</a></small> 
</n4> 
<p>i0S is a mobile operating system developed and distributed by 
Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, 
and Apple TV. iOS is derived from OS X, with which it shares 
the Darwin foundation. iOS is Apple's mobile version of the OS X 
operating system used on Apple computers.</p> 
</div> 
<div class="section"> 
<h4 id="svn">SVN<small></small></h4> 
<p>Apache Subversion which is often abbreviated as SVN, is a software 
versioning and revision control system distributed under an open 
source license. Subversion was created by CollabNet Inc. in 2000, 
but now it is developed as a project of the Apache Software 
Foundation, and as such is part of a rich community of developers 
and users.</p> 
</div> 
<div class="section"> 


<h4 id="jJmeter">jMeter<small><a href="#" onclick="removeSection (this) ;"> 


&times; Remove this section</a></small> 
«/h4» 
<p>jMeter is an Open Source testing software. It is 100% pure Java 
application for load and performance testing.</p> 
«/div» 
<div class="section"> 
<h4 id="ejb">EJB</h4> 
<p>Enterprise Java Beans (EJB) is a development architecture for 
building highly scalable and robust enterprise level applications 
to be deployed on J2EE compliant Application Server such as JBOSS, 
Web Logic etc.</p> 
</div> 
<div class="section"> 
<h4 id="spring">Spring</h4> 
<p>Spring framework is an open source Java platform that provides 
comprehensive infrastructure support for developing robust Java 
applications very easily and very rapidly.</p> 
<p>Spring framework was initially written by Rod Johnson and was 
first released under the Apache 2.0 license in June 2003.</p> 
</div> 
</div> 
<script type="text/javascript"> 
$ (function (){ 
removeSection = function(e) { 
$ (e) .parents (".section") .remove (); 
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S(' [data-spy="scrol1"]') .each(function () { 
var Sspy = $(this) ..scrollspy('refresh') 
)); 
) 
$("#myScrollspy") .scrollspy (); 


$ ('fmyScrollspy') .on('activate.bs.scrollspy', function () { 
var currentItem = $(".nav li.active > a").text(); 
S("factiveitem").html ("Currently you are viewing - " + currentItem); 
}) 
)); 
«/script» 


Currently you are viewing - iOS 


Scroll through the elements and see how the above line changes its content based on active element. 


Tutorial Name — IOS. SWN Jwa- 


iOS. Remove tnis section 


IOS is a mobile operating system developed and distributed by Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and Apple 


TV. iOS is derived from OS X, with which È shares the Darwin foundation. IOS is Apple's mobile version of the OS X operating system used on | 


Appie computers 
SVN 


Apache Subversion which is often abbreviated as SVN, is a software versioning and revision control system distributed under an open source 
license. Subversion was created by CollabNet Inc. in 2000, but now it is developed as a project of the Apache Software Foundation, and as 
such is part of a rich community of developers and users. 


TUTORIALS POINT 
Simply Easy Learning 


Bootstrap Tab Plugin 


abs were introduced in the chapter Bootstrap Navigation Elements. By combining a few data attributes, 


you can easily create a tabbed interface. With this plugin you can transition through panes of local content in tabs 
or pills, even via dropdown menus. 

If you want to include this plugin functionality individually, then you will need tab.js. Else, as mentioned in the 
chapter Bootstrap Plugins Overview, you can include bootstrap.js or the minified bootstrap.min.js. 


Usage 
You can enable tabbable tabs in the following two ways: 


e Via data attributes: you need to add data-toggle="tab" or data-togglez"pill" to the anchors. 


Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling, while adding 
thenav and nav-pills classes will apply pill styling. 


<ul class="nav nav-tabs"> 
<li><a href="#identifier" data-toggle-"tab"»Home«/a»«/li» 


</ul> 
e Via JavaScript: you can enable tabs using Javscript as below : 


$('#myTab a').click(function (e) { 
e.preventDefault () 
S (Walls) tala (V imo V ) 

}) 


Here’s an example of different ways to activate individual tabs: 


// Select tab by name 
S('fmyTab a[href="#profile"]').tab('show') 


fi Selec: ricse alo 
S('fmyTab a:first').tab('show') 


// Select last tab 
$('#myTab a:last').tab('show') 


// Select third tab (0-indexed) 
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S('fmyTab li:eq(2) ail .tab('show') 


FADE EFFECT 


To get a fade effect for tabs, add .fade to each .tab-pane. The first tab pane must also have .in to properly fade in 
initial content: 


<div class="tab-content"> 
<div class="tab-pane fade in active" id="home">...</div> 
<div class="tab-pane fade" id="svn">...</div> 
<div class="tab-pane fade" id="ios">...</div> 
<div class="tab-pane fade" id="java">...</div> 
</div> 


EXAMPLE 


An example of tab plugin using data attributes and fade effect is as shown in the following example: 


<ul id="myTab" class="nav nav-tabs"> 
<li class="active"> 
<a href="#home" data-toggle="tab"> 
Tutorial Point Home 
</a> 
Se Lie 
<li><a href="#ios" data-toggle-"tab"»iOS«/a»«/li» 
<li class="dropdown"> 
<a href="#" id-"myTabDropl" class="dropdown-toggle" 
data-toggle="dropdown">Java 
<b class="caret"></b> 
</a> 
«ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"> 
<li><a href="#jmeter" tabindex-"-1" data-toggle="tab">jmeter</a></li> 
<li><a href="#ejb" tabindex-"-1" data-toggle="tab">ejb</a></1li> 
</ul> 
</li> 
als 
<div id="myTabContent" class="tab-content"> 
<div class="tab-pane fade in active" id="home"> 
<p>Tutorials Point is a place for beginners in all technical areas. 
This website covers most of the latest technoligies and explains 
each of the technology with simple examples. You also have a 
<b>tryit</b> editor, wherein you can edit your code and 
try out different possibilities of the examples.</p> 
</div> 
<div class="tab-pane fade" id="ios"> 
<p>i0S is a mobile operating system developed and distributed by Apple 
Inc. Originally released in 2007 for the iPhone, iPod Touch, and 
Apple TV. iOS is derived from OS X, with which it shares the 
Darwin foundation. iOS is Apple's mobile version of the 
OS X operating system used on Apple computers.</p> 
</div> 
<div class="tab-pane fade" id="jmeter"> 
<p>jMeter is an Open Source testing software. It is 100% pure 
Java application for load and performance testing.</p> 
</div> 
<div class="tab-pane fade" id="ejb"> 
<p>Enterprise Java Beans (EJB) is a development architecture 
for building highly scalable and robust enterprise level 
applications to be deployed on J2EE compliant 
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Application Server such as JBOSS, Web Logic etc. 
</p> 
</div> 
</div> 


Tutorial Point Home OS Java + 


Tutorials Point is a place for beginners in all technical areas. This website covers most of the latest 
technoligies and explains each of the technology with simple examples. You also have a tryit editor, 
wherein you can edit your code and try out different possibilities of the examples. 


Methods 


.$().tab: This method activates a tab element and content container. Tab should have either a data-target or 
an href targeting a container node in the DOM. 


<ul class="nav nav-tabs" id="myTab"> 
<li class="active"><a href="#identifier" data-toggle="tab">Home</a></1li> 


<div class="tab-content"> 
<div class="tab-pane active" id="home">...</div> 


SS ORI 
S (euincicakorm (D) 4 
S('fmyTab a:last').tab('show') 
}) 


EE EE 


EXAMPLE 


The following example shows use of tab plugin method .tab. Here in the example the second tab ¡OSis activated: 


<ul id="myTab" class="nav nav-tabs"> 
<li class="active"><a href="#home" data-toggle="tab"> 
Tutorial Point Home</a> 
Eq 
<li><a href="#ios" data-toggle-"tab"»iOS«/a»«/li» 
<li class="dropdown"> 
<a href="#" id-"myTabDropl" class="dropdown-toggle" 
data-toggle="dropdown">Java <b class="caret"></b> 
</a> 
«ul class-"dropdown-menu" role="menu" aria-labelledby="myTabDrop1"> 
<li><a href="#jmeter" tabindex-"-1" data-toggle="tab"> 
jmeter</a> 
ey s 
<li><a href="#ejb" tabindex-"-1" data-toggle-"tab"» 
ejb«/a» 
yas 
«/ul» 
</li> 
</ul> 
<div id="myTabContent" class="tab-content"> 
<div class="tab-pane fade in active" id="home"> 
<p>Tutorials Point is a place for beginners in all technical areas. 
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This website covers most of the latest technoligies and explains 
each of the technology with simple examples. You also have a 
<b>tryit</b> editor, wherein you can edit your code and 
try out different possibilities of the examples.</p> 
</div> 
<div class="tab-pane fade" id="ios"> 
<p>i0S is a mobile operating system developed and distributed by Apple 
Inc. Originally released in 2007 for the iPhone, iPod Touch, and 
Apple TV. iOS is derived from OS X, with which it shares the 
Darwin foundation. iOS is Apple's mobile version of the 
OS X operating system used on Apple computers.</p> 
</div> 
<div class="tab-pane fade" id="jmeter"> 
<p>jMeter is an Open Source testing software. It is 100% pure 
Java application for load and performance testing.</p> 
</div> 
<div class="tab-pane fade" id="ejb"> 
<p>Enterprise Java Beans (EJB) is a development architecture 
for building highly scalable and robust enterprise level 
applications to be deployed on J2EE compliant 
Application Server such as JBOSS, Web Logic etc. 
</p> 
</div> 
</div> 
<script> 
Situnctaon () 4 
S('fmyTab li:eq(1) a').tab('show'); 
)); 
</script> 


3 


»veloped and distributed by Apple Inc 


it shares the Darwin foundation. iOS is Apple's mobile version of the OS 
p 


Originally released in 2007 for the Phone, iPod Touch, and Apple TV 


X operaling system used on Apple 


Events 
Following table lists the events to work with tab plugin. This event may be used to hook into the function. 
Event Description Example 
$('a[data- 


This event fires on tab show, but before the new 
tab has been shown. 

show.bs.tab ^ Use event.target andevent.relatedTarget to 
target the active tab and the previous active tab 
(if available) respectively. 


function (e) { 
e.target // activated tab 


}) 


This event fires on tab show after a tab has $('a[data- 

been shown. toggle-"tab"]").on('shown.bs.tab', 
shown.bs.tab | Useevent.target andevent.relatedTarget to function (e) ( 

target the active tab and the previous active tab e.target // activated tab 

(if available) respectively. .relatedTarget // previous tab 
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toggle-"tab"]').on('show.bs.tab', 


.relatedTarget // previous tab 


EXAMPLE 


The following example shows use of tab plugin events. Here in the example we will display the current and 
previous visited tabs: 


<hr> 
<p class="active-tab"><strong>Active Tab</strong>: <span></span></p> 
<p class="previous-tab"><strong>Previous Tab</strong>: <span></span></p> 
<hr> 
<ul id="myTab" class="nav nav-tabs"> 
<li class="active"><a href="#home" data-toggle="tab"> 
Tutorial Point Home</a></1i> 
<li><a href="#ios" data-toggle-"tab"»iOS«/a»«/li» 
<li class="dropdown"> 
<a href="#" id-"myTabDropl" class="dropdown-toggle" 
data-toggle="dropdown"> 
Java <b class="caret"></b></a> 
«ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"> 
<li><a href="#jmeter" tabindex-"-1" data-toggle-"tab"»jmeter«/a»«/li» 
<li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></1li> 
</uL> 
</li> 
</ul> 
<div id="myTabContent" class="tab-content"> 
<div class="tab-pane fade in active" id="home"> 
<p>Tutorials Point is a place for beginners in all technical areas. 
This website covers most of the latest technoligies and explains 
each of the technology with simple examples. You also have a 
<b>tryit</b> editor, wherein you can edit your code and 
try out different possibilities of the examples .</p> 
</div> 
<div class="tab-pane fade" id="ios"> 
<p>i0S is a mobile operating system developed and distributed by Apple 
Inc. Originally released in 2007 for the iPhone, iPod Touch, and 
Apple TV. iOS is derived from OS X, with which it shares the 
Darwin foundation. iOS is Apple's mobile version of the 
OS X operating system used on Apple computers.</p> 
</div> 
<div class="tab-pane fade" id="jmeter"> 
<p>jMeter is an Open Source testing software. It is 100% pure 
Java application for load and performance testing.</p> 
</div> 
<div class="tab-pane fade" id="ejb"> 
<p>Enterprise Java Beans (EJB) is a development architecture 
for building highly scalable and robust enterprise level 
applications to be deployed on J2EE compliant 
Application Server such as JBOSS, Web Logic etc. 
</p> 
</div> 
</div> 
<SCript> 
$ (function () { 
S('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
// Get the name of active tab 
var activeTab = $(e.target).text (); 
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// Get the name of previous tab 
var previousTab = $(e.relatedTarget) .text(); 
$(".active-tab span") .html (activeTab) ; 
$(".previous-tab span") .html (previousTab) ; 
)); 
D 
</script> 


Active Tab OS 
Previous Tab: Tutorial Poet Home 


Tutorial Point Home Os Java ~ 
iOS is a moble operating system developed and distributed by Apple Inc. Originally released in 2007 for the iPhone, Pod Touch, and Apple TV. 


IOS is derived from OS X, with which it shares the Darwin foundation. IOS is Apple's mobile version of tha OS X operating system used on Apple 
computers. 
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Bootstrap Tooltip Plugin 


ooltips are useful when you need to describe a link. The plugin was inspired by ¡Query. tipsy plugin written 


by Jason Frame. Tooltips have since been updated to work without images, animate with a CSS animation, and 
data-attributes for local title storage. 

If you want to include this plugin functionality individually, then you will need tooltip.js. Else, as mentioned in the 
chapter Bootstrap Plugins Overview, you can include bootstrap.js or the minified bootstrap.min.js. 


Usage 


The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger 
element. You can add tooltips in the following two ways: 


e Via data attributes: To add a tooltip, add data-toggle="tooltip" to an anchor tag. The title of the anchor will 
be the text of a tooltip. By default, tooltip is set to top by the plugin. 


<a href="#" data-toggle="tooltip" title="Example tooltip">Hover over me</a> 


e Via JavaScript: Trigger the tooltip via JavaScript: 
$('#identifier') .tooltip (options) 


Tooltip plugin is NOT only-css plugins like dropdown or other plugins discussed in previous chapters. To use this 
plugin you MUST activate it using jquery (read javascript). To enable all the tooltips on your page just use this 
script: 


(Econ () ¢ Si ett ere eebe E ere ste ile 


EXAMPLE 


The following example demonstrates the use of tooltip plugin via data attributes. 


<h4>Tooltip examples for anchors</h4> 

This is a <a href="#" class="tooltip-test" data-toggle="tooltip" 
title="Tooltip on left"> 
Default Tooltip 

</a>. 

This is a <a href="#" class="tooltip-test" data-toggle="tooltip" 
data-placement="left" title="Tooltip on left"> 
Tooltip on Left 

</a>. 
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This is a «a href="#" data-toggle-"tooltip" data-placement="top" 
title-"Tooltip on top"» 
Tooltip on Top 
</a>. 
This is a <a href="#" data-toggle="tooltip" data-placement="bottom" 
title="Tooltip on bottom"> 
Tooltip on Bottom 
</a>. 
This is a <a href="#" data-toggle="tooltip" data-placement="right" 
title="Tooltip on right"> 
Tooltip on Right 
</a> 


«bx» 


<h4>Tooltip examples for buttons</h4> 


<button type="button" class="btn btn-default" data-toggle="tooltip" 
title="Tooltip on left"> 
Default Tooltip 

</button> 

<button type="button" class="btn btn-default" data-toggle="tooltip" 
data-placement="left" title="Tooltip on left"> 
Tooltip on left 

</button> 

<button type="button" class="btn btn-default" data-toggle="tooltip" 
data-placement="top" title="Tooltip on top"> 
Tooltip on top 

</button> 

<button type="button" class="btn btn-default" data-toggle="tooltip" 
data-placement="bottom" title="Tooltip on bottom"> 
Tooltip on bottom 

</button> 

<button type="button" class="btn btn-default" data-toggle="tooltip" 
data-placement="right" title="Tooltip on right"> 
Tooltip on right 

</button> 


SEELEN 
$ (function () { $("[data-toggle='tooltip']").tooltip(); }); 
</script> 
Tooltip EXE anchors 
This is a Default Tool. This isa Too? en, This is a Toolfir Top. This is a Tooltir Boltom, This i$ a Toollip on Righ 


Tooltip examples for buttons 


Defaut Tooltip Tooltip on left Tooltip on top Tooltip on bottom Tooltip on right 


Options 


There are certain options which can be added via the Bootstrap Data API or invoked via JavaScript 
table lists the options: 


: Data 
Option Type/Default R SUR 
attribute Description 
Name Value AS 
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. Following 


animation 


Html 


placement 


selector 


Title 


Trigger 


content 


Delay 


container 


boolean 
Default: true 


boolean 
Default: false 


string|function 
Default: top 


string 
Default: false 


string | function 
Default: " 


string 
Default: ‘hover 
focus' 


string | function 
Default: " 


number | object 
Default: 0 


string | false 
Default: false 


Methods 


The following are some useful methods for tooltips: 


Method 


Options: .tooltip(options) 


Toggle:.tooltip('toggle') 


Show:.tooltip('show') 


Hide: .tooltip('hide') 


Destroy:.tooltip(‘destroy') 


data- 
animation 


data-html 


data- 
placement 


data-selector 


data-title 


data-trigger 


data-content 


data-delay 


data- 
container 


Description 
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Attaches a tooltip handler to an element 
collection. 


Toggles an element's tooltip. 


Reveals an element's tooltip. 


Hides an element's tooltip. 


Hides and destroys an element's tooltip. 


Applies a CSS fade transition to the tooltip. 


Inserts HTML into the tooltip. If false, jQuery's text method will be 
used to insert content into the dom. Use text if you're worried about 
XSS attacks. 


Specifies how to position the tooltip (Le, top|bottom|left|right|auto). 
When auto is specified, it will dynamically reorient the tooltip. For 
example, if placement is "auto left", the tooltip will display to the left 
when possible, otherwise it will display right. 


If a selector is provided, tooltip objects will be delegated to the 
specified targets. 


The title option is the default title value if the title attribute isn't 
present. 


Defines how the tooltip is triggered: click| hover | focus | manual. 
You may pass multiple triggers; separate them with a space. 


default content value if data-content attribute isn't present 


Delays showing and hiding the tooltip in ms — does not apply to 
manual trigger type. If a number is supplied, delay is applied to 
both hide/show. Object structure is: 


delay: 


| siew SOO), mieles 100 y 


Appends the tooltip to a specific element. 
Example: container: 'body' 


Example 


$().tooltip(options) 

$ ('felement') .tooltip('toggle') 
$('#element') .tooltip('show') 

S ("tellement") .tooltip ("hide") 
$('#element') .tooltip('destroy') 


EXAMPLE 


The following example demonstrates the use of tooltip plugin via data attributes. 


<div style="padding: 100px 100px 10px;"> 


This is a <a href="#" class="tooltip-show" data-toggle="tooltip" 
title="show">Tooltip on method show 

EE 

This is a <a href="#" class="tooltip-hide" data-toggle="tooltip" 
data-placement="left" title="hide">Tooltip on method hide 

E do. 

This is a «a href="#" class="tooltip-destroy" data-toggle="tooltip" 
data-placement="top" title="destroy">Tooltip on method destroy 

</a>. 

This is a <a href="#" class="tooltip-toggle" data-toggle="tooltip" 
data-placement="bottom" title="toggle">Tooltip on method toggle 

Kfar. 


<br><br><br><br><br><br> 
<p class="tooltip-options" > 
This is a <a href="#" data-toggle="tooltip" title="<h2>'am Header? 
</h2>">Tooltip on method options 


</a>. 
</p> 
&seript» 
S(function () ( $('.tooltip-show').tooltip('show');)); 
$(function () ( $('.tooltip-hide').tooltip('hide');)); 
(function () ( $('.tooltip-destroy').tooltip('destroy');)); 
$(function () ( $('.tooltip-toggle') .tooltip('toggle');}); 
S$(function () ( $(".tooltip-options a").tooltip((html : true )); 
)); 
</script> 
<div> 
This i$ à f e w. Thisis a ` eth e. This isa lip on me jes This i$ à It eh 
am Header? 
This is a Tookip pn mattiod options 
Events 


Following table lists the events to work with tooltip plugin. This event may be used to hook into the function. 


Event Description Example 


This event fires immediately when 3 ('#myTooltip').on('show.bs.tooltip', 


the show instance method is called. function () 1 
// do something... 


show.bs.tooltip 
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shown.bs.tooltip 


hide.bs.tooltip 


hidden.bs.tooltip 


EXAMPLE 


This event is fired when the tooltip 
has been made visible to the user 
(will wait for CSS transitions to 
complete).. 


This event is fired immediately 
when the hide instance method has 
been called. 


This event is fired when the tooltip 
has finished being hidden from the 
user (will wait for CSS transitions to 
complete). 


$ ('fmyTooltip').on('shown.bs.tooltip', 
"Eelere O A 


}) 


// do something... 


$('#myTooltip').on('hide.bs.tooltip', 
Foaeciem (V A 


}) 


// do something... 


$('£myTooltip').on('hidden.bs.tooltip', 
Fuaccica (VU d 


}) 


// do something... 


The following example demonstrates the use of tooltip plugin via data attributes. 


<h4>Tooltip examples for anchors</h4> 
This is a <a href="#" class="tooltip-show" data-toggle="tooltip" 


title="Default Tooltip">Default Tooltip 


</a>. 


<script> 
$ (function 
S(functiorn 


DI; 
</seript> 


() 
() 


{ $('.tooltip-show') .tooltip('show');}); 
{ $('.tooltip-show') .on('show.bs.tooltip', function () { 
alert ("Alert message on show"); 
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Alert message on show 


Bootstrap Popover Plugin 


he popover is similar to tooltip, offering an extended view complete with a heading. For the popover to 


activate, a user just needs to hover the cursor over the element. The content of the popover can be populated 
entirely using the Bootstrap Data API. This method requires a tooltip. 


If you want to include this plugin functionality individually, then you will need popover.js and it has a dependency 


of tooltip plugin. Else, as mentioned in the chapter Bootstrap Plugins Overview, you can include bootstrap.js or the 
minified bootstrap.min.js. 


Usage 


The popover plugin generates content and markup on demand, and by default places popover after their trigger 
element. You can add popover in the following two ways: 


e Via data attributes: To add a popover, add data-toggle="popover" to an anchor/button tag. The title of the 
anchor will be the text of a popover. By default, popover is set to top by the plugin. 


<a href="#" data-toggle="popover" title="Example popover"> 
Roma Oval me 
</a> 


e Via JavaScript: Enable popovers via JavaScript using the following syntax: 
$('#identifier') .popover (options) 

Popover plugin is NOT only-css plugins like dropdown or other plugins discussed in previous chapters. To use this 

plugin you MUST activate it using jquery (read javascript). To enable all the popovers on your page just use this 


script: 


Sisuncton NN (Uidata—coggle="popover” ||") popover (Mi 


EXAMPLE 


The following example demonstrates the use of popover plugin via data attributes. 


<div class="container" style="padding: 100px 50px 10px;" > 
<button type="button" class="btn btn-default" title="Popover title" 
data-container="body" data-toggle="popover" data-placement="left" 
data-content="Some content in Popover on left"> 
Popover on left 
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</But 


ton> 


<button type="button" class="btn btn-primary" title="Popover title" 


da 
da 


</but 


ta-container="body" data-toggle="popover" data-placement="top" 
ta-content="Some content in Popover on top"> 


Popover on top 


Cons 


<button type="button" class="btn btn-success" title="Popover title" 


da 
da 


</but 


ta-container="body" data-toggle="popover" data-placement="bottom" 
ta-content="Some content in Popover on bottom"> 


Popover on bottom 


Cor 


<button type="button" class="btn btn-warning" title="Popover title" 


data-container="body" data-toggle="popover" data-placement="right" 
data-content="Some content in Popover on right"> 
Popover on right 

</button> 

</div> 


<script>S (function () 
( $("[data-toggle='popover']") .popover (); 


}) 


r 


</script> 


</div> 


Popover tie 


Some content in Popover on top 


das | Popoveron top | —Á— a | Popover on sat 


Options 


There are certain options which can be added via the Bootstrap Data API or invoked via JavaScript 
table lists the options: 


Option 
Name 


animation 


html 


placement 


selector 


title 


. Following 


Data 

zer attribute Description 

Value 
name 

adan eise Applies a CSS fade transition to the popover 

Default: true animation pp PoR à 

boolean Inserts HTML into the popover. If false, jQuery’s text method will 
data-html be used to insert content into the dom. Use text if you're worried 


Default: false about XSS attacks. 


Specifies how to position the popover (i.e., 


string|function data: top|bottom|left|right|auto). 


When auto is specified, it will dynamically reorient the popover. 


EE pacemen For example, if placement is "auto left", the popover will display to 
the left when possible, otherwise it will display right. 
string If a selector is provided, popover objects will be delegated to the 


data-selector 


Default: false specified targets. 


string | function  data-title The title option is the default title value if the title attribu 
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te isn't 


Default: " 


string 
trigger Default: 'hover  data-trigger 
focus' 


number | object 


delay Default: 0 


data-delay 


string | false data- 
Default: false container 


Methods 


container 


present. 


Defines how the popover is triggered: click| hover | focus | 
manual. You may pass multiple triggers; separate them with a 
space. 


Delays showing and hiding the popover in ms — does not apply to 
manual trigger type. If a number is supplied, delay is applied to 
both hide/show. Object structure is: 


delay: 
T enews S00 a OO 


Appends the popover to a specific element. 
Example: container: 'body' 


The following are some useful methods for popover: 


Method Description Example 

Options:.popover(options) E EEN $ () .popover (options) 
Toggle:.popover('toggle") Toggles an element's popover. $('#element') .popover ('toggle') 
Show:.popover('show!) Reveals an element's popover. $('#element') .popover ("show") 
Hide:.popover('hide') Hides an element's popover. $('#element') .popover ('hide') 
Destroy:.popover('destroy') E a etn GS s $('telement').popover('destroy') 


popover. 


EXAMPLE 


The following example demonstrates popover plugin methods: 


<div class="container" style-"padding: 100px 50px 10px;" > 
<button type="button" class="btn btn-default popover-show" 
title="Popover title" data-container="body" 
data-toggle="popover" data-placement="left" 
data-content="Some content in Popover with show method"> 


Popover on left 
</button> 


<button type="button" class="btn btn-primary popover-hide" 
title="Popover title" data-container="body" 
data-toggle="popover" data-placement="top" 
data-content="Some content in Popover-hide method"> 


Popover on top 
</button> 


<button type="button" class="btn btn-success popover-destroy" 
title="Popover title" data-container="body" 
data-toggle="popover" data-placement="bottom" 
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data-content="Some content in Popover-destroy method"> 
Popover on bottom 
</button> 
<button type="button" class="btn btn-warning popover-toggle" 
title="Popover title" data-container="body" 
data-toggle="popover" data-placement="top" 
data-content="Some content in Popover-toggle method"> 
Popover on right 
</button><br><br><br><br><br><br> 
<p class="popover-options"> 
<a href="#" type="button" class="btn btn-warning" title="<h2>Title</h2>" 
data-container="body" data-toggle="popover" data-content=" 
<h4>Some content in Popover-options method</h4>"> 


Popover 
</a> 
</p> 
«scripto 
$(function () ( $('.popover-show') .popover ('show');)); 
$ (function () { $('.popover-hide') .popover ('hide');)); 
$(function () ( $('.popover-destroy') .popover ('destroy');)); 
$(function () { $('.popover-toggle') .popover ('toggle');)); 
$ (function () { $(".popover-options a") .popover((html : true });}); 
</script> 
</div> 
Popover titie 
Popover ttle 
Some content in Popover-toggle 
Some content in Popover-hide method method 
Popover title 
Popover on left opove to Popover on bottom 


Some content in Popover with show 
method 


Title 


Some content in Popover- 
options method 


Events 


Following table lists the events to work with popover plugin. This event may be used to hook into the function. 


Event Description Example 


$('#mypopover').on('show.bs.popover', 
Fumero (()) if 

// do something... 
}) 


This event fires immediately when 
show.bs.popover ` the show instance method is 
called. 


This event is fired when the 

popover has been made visible to $ ('#mypopover') .on('shown.bs.popover', 
the user (will wait for CSS o M) l 

transitions to complete)... // do something... 


shown.bs.popover 
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$ ('fmypopover') .on('hide.bs.popover', 
Zoe (0) 4 
// do something... 


This event is fired immediately 
hide.bs.popover when the hide instance method 


has been called. T 
This event is fired when the $('#mypopover').on('hidden.bs.popover', 
à popover has finished being hidden function () { 
hidden.bs.popover | fom the user (will wait for CSS Ji do T ME 
transitions to complete). }) 


EXAMPLE 


The following example demonstrates the Popover plugin events: 


<div clas="container" style="padding: 100px 50px 10px;" > 
<button type="button" class="btn btn-primary popover-show" 
title="Popover title" data-container="body" 
data-toggle="popover" 
data-content="Some content in Popover with show method"> 
Popover on left 


</button> 
</div> 
<SCXLPL> 
$(function () { $('.popover-show') .popover ('show');)); 
$ (function () { $('.popover-show').on('shown.bs.popover', function () { 


alert ("Alert message on show"); 
DH; 
</script> 
</div> 


Alert message on show 
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Bootstrap Alert Plugin 


lert messages are mostly used to display information such as warning or confirmation messages to the 


end users. Using alert message plugin you can add dismiss functionality to all alert messages. 


If you want to include this plugin functionality individually, then you will need alert.js. Else, as mentioned in the 
chapter Bootstrap Plugins Overview, you can include bootstrap.js or the minified bootstrap.min.js. 


Usage 
You can enable dismissal of an alert in the following two ways: 


e Via data attributes: To dismiss via Data API just add data-dismiss="alert"to your close button to 
automatically give an alert close functionality. 


<a class="close" data-dismiss="alert" href="#" aria-hidden="true"> 
&times; 
slas 


e Via JavaScript: To dismiss via JavaScript use the following syntax: 


(0 allece”) subesse (0) 


EXAMPLE 


The following example demonstrates the use of alert plugin via data attributes. 


<div class="alert alert-success"> 
<a href="#" class="close" data-dismiss="alert"> 
&times; 
</a> 
<strong>Warning!</strong> There was a problem with your 
network connection. 
</div> 
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Warning! There was a problem with your network connection 


OPTIONS 


No options 


METHODS 


The following are some useful methods for alert plugin: 


Method Description Example 

alert() TE method wraps all alerts with close SMS MEISTE 
unctionality. 

Close To enable all alerts to be closed, add auo E : "M 

Method.alert('close") this method. pcc ec 


To enable alerts to animate out when closed, make sure they have the .fade and .in class already applied to them. 


EXAMPLE 


The following example demonstrates use of .alert() method: 


<h3>Alert messages to demonstrate alert() method </h3> 

<div id="myAlert" class="alert alert-success"> 
<a href="#" class-"close" data-dismiss="alert">étimes;</a> 
<strong>Success!</strong> the result is successful. 

</div> 

<div id="myAlert" class="alert alert-warning"> 
<a href="#" class-"close" data-dismiss="alert">étimes;</a> 
<strong>Warning!</strong> There was a problem with your 
network connection. 

</div> 


<script type="text/javascript"> 
$ (function () { 
§(".close") .click (function () { 
$("#myAlert").alert(); 
)); 
by 
</script> 


Try this code using the Try it editor. 


The following example demonstrates use of .alert('close') method: 


<h3>Alert messages to demonstrate alert('close') method </h3> 
<div id="myAlert" class="alert alert-success"> 
<a href="#" class="close" data-dismiss="alert">&times;</a> 
<strong>Success!</strong> the result is successful. 
</div> 
<div id="myAlert" class="alert alert-warning"> 
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<a href="#" class-"close" data-dismiss="alert">étimes;</a> 
<strong>Warning!</strong> There was a problem with your 
network connection. 

</div> 


<script type="text/javascript"> 
$ (function () { 
$(".close") .click (function () { 
S("*fmyAlert").alert('close'); 
)); 
Is 


</script> 


Try this code using the Try it editor. You can see that the close functionality is applied to all the alert messages i.e 
close any alert message, rest of the alert messages also get closed. 


EVENTS 


Following table lists the events to work with alert plugin. This event may be used to hook into the alert function. 


Event Description Example 


S ('fmyalert') .bind('close.bs.alert', 
This event fires immediately when UME 40) A 
the close instance method is called. // do something... 

}) 


close.bs.alert 


Si(‘4myallert) .band (velosedibs.alertk", 
pino (CN 1 

// do something... 
}) 


This event is fired when the alert has 
closed.bs.alert been closed (will wait for CSS 
transitions to complete). 


EXAMPLE 


The following example demonstrates the alert plugin events: 


<div id="myAlert" class="alert alert-success"> 
<a href="#" class-"close" data-dismiss="alert">étimes;</a> 
<strong>Success!</strong> the result is successful. 

</div> 


<script type="text/javascript"> 
S (function (i 
$ ("fmyAlert") .bind('closed.bs.alert', function () { 
alert ("Alert message box is closed."); 
)); 
D 
</script> 
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Alert message box is closed. 
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Bootstrap Button Plugin 


uttons were explained in chapter Bootstrap Buttons. With this plugin you can add in some interaction 


such as control button states or create groups of buttons for more components like toolbars. 
If you want to include this plugin functionality individually, then you will need button.js. Else, as mentioned in the 
chapter Bootstrap Plugins Overview, you can include bootstrap.js or the minified bootstrap.min.js. 


Loading State 


To add a loading state to a button, simply add data-loading-text="Loading..." as an attribute to the button 
element as shown in the following example: 


<button id="fat-btn" class="btn btn-primary" data-loading-text="Loading..." 
type="button"> Loading state 
e button 
<SCripe> 
S(tunctionl) d 
$(".btn") .click (function () { 
$ (this) .button('loading') .delay(1000) .queue (function() { 
// $(thzis) button ("reset"); 
DÉI 
II: 
)); 
</script> 


When you click on the button the output would be as seen in the following image: 


Single toggle 


To activate toggling (i.e. change the normal state of a button to a push state and vice versa) on a single button, 
add data-toggle="button" as an attribute to the button element as shown in the following example: 
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<button type="button" class="btn btn-primary" 
data-toggle="button">Single toggle 


</button> 
Single toggle 


Checkbox 


You can create group of checkboxes and add toggling to it by simply adding the data attribute data- 
toggle="buttons" to the btn-group 


<div class="btn-group" data-toggle="buttons"> 
<label class="btn btn-primary"> 
<input type="checkbox"> Option 1 
</label> 
<label class="btn btn-primary"> 
<input type="checkbox"> Option 2 
</label> 
<label class="btn btn-primary"> 
<input type="checkbox"> Option 3 
</label> 
</div> 


Option 1 Option2 Opt 


Radio 


Similarly you can create group of radio inputs and add toggling to it by simply adding the data attributedata- 
toggle="buttons" to the btn-group. 


<div class="btn-group" data-toggle="buttons"> 
<label class="btn btn-primary"> 
<input type="radio" name="options" id="optionl"> Option 1 
</label> 
<label class="btn btn-primary"> 
<input type="radio" name="options" id="option2"> Option 2 
</label> 
<label class="btn btn-primary"> 
<input type="radio" name="options" id="option3"> Option 3 
</label> 
«y dive 
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Option 1 Option 2 Option 3 


Usage 
You can enable buttons plugin via JavaScript as below: 


SU ere H oTextie tea (C) 


Options 


No options 


Methods 


The following are some useful methods for buttons plugin: 
Method Description Example 


Toggles push state. Gives the button the appearance that it has 
button('toggle") been activated. You can also enable auto toggling of a button by | $ () .button('toggle') 
using thedata-toggle attribute. 


When loading, the button is disabled and the text is changed to 


the option from the data-loading-textattribute of button element Y 1) sbuttent'Teadingn) 


.button('loading") 


Resets button state, bringing the original content back to the 
-button(‘reset') text. This method is useful when you need to return the button © (0) alsiietiom (( rers: J 
back to the primary state 


String in this method is referring to any string declared by the 
.button(string) user.To reset the button state and bring in new content use this — $ () -button (string) 
method. 


EXAMPLE 


The following example demonstrates use of above methods: 


<h2>Click on each of the buttons to see the effects of methods</h2> 
<h4>Example to demonstrate  .button('toggle') method</h4> 
«div id="myButtons1" class="bs-example"> 

<button type="button" class="btn btn-primary">Primary</button> 
</div> 


<h4>Example to demonstrate  .button('loading') method</h4> 
<div id="myButtons2" class="bs-example"> 
<button type="button" class="btn btn-primary" 
data-loading-text="Loading...">Primary 
</button> 
</div> 
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<h4>Example to demonstrate  .button('reset') method</h4> 
<div id="myButtons3" class="bs-example"> 
<button type="button" class="btn btn-primary" 
data-loading-text="Loading...">Primary 
</button> 
sy dr 


<h4>Example to demonstrate  .button(string) method</h4> 
<button type="button" class="btn btn-primary" id="myButton4" 
data-complete-text="Loading finished">Click Me 


</button> 
<script type="text/javascript"> 
$(function () { 


$("#myButtonsl .btn").click(function()( 
$ (this) .button('toggle'); 
)); 
)); 
$(function() { 
$("#myButtons2 .btn").click(function()( 
$ (this) .button('loading') .delay (1000) .queue (function() { 
)); 
D 
Els 
$ (function() { 
$("#myButtons3 .btn").click(function () { 
$ (this) .button('loading') .delay(1000) .queue (function() { 
$ (this) .button('reset'); 
)); 
D 
)); 
$(function() { 
$("#myButton4") .click (function () { 
$ (this) .button('loading') .delay(1000) .queue (function() { 
$ (this) .button('complete'); 
)); 
D 
)); 
sl seript> 


Click on each of the buttons to see the effects of methods 
Example to demonstrate .button('toggle') method 


Example to demonstrate .button(loading') method 


Example to demonstrate .button('reset') method 


Example to demonstrate .button(string) method 
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Bootstrap Collapse Plugin 


he collapse plugin makes it easy to make collapsing divisions of the page. Whether you use it to build 


accordion navigation or content boxes, it allows for a lot of content options. 


If you want to include this plugin functionality individually, then you will need collapse.js. This also requires 
the Transition Plugin to be included in your version of Bootstrap. Else, as mentioned in the chapter Bootstrap 
Plugins Overview, you can include bootstrap.js or the minified bootstrap.min.js. 


You can use the collapse plugin: 


e To create collapsible groups or accordion. This can be created as in the sample example below: 


<div class-"panel-group" id="accordion"> 
<div class="panel panel-default"> 
<div class="panel-heading"> 
<h4 class="panel-title"> 
<a data-toggle="collapse" data-parent="#accordion" 
href="#collapseOne"> 
Click me to exapand. Click me again to collapse.Section 1 
</a> 
</h4> 
</div> 
<div id="collapseOne" class="panel-collapse collapse in"> 
<div class="panel-body"> 
Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
vice lomo. 
</div> 
</div> 
</div> 
<div class="panel panel-default"> 
<div class="panel-heading"> 
<h4 class="panel-title"> 
<a data-toggle="collapse" data-parent="#accordion" 
href="#collapseTwo"> 
Click me to exapand. Click me again to collapse.Section 2 
</a> 
</n4> 
</div> 
<div id="collapseTwo" class="panel-collapse collapse"> 
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<div class="panel-body"> 
Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
vice lomo. 
</div> 
</div> 
</div> 
<div class="panel panel-default"> 
<div class="panel-heading"> 
<h4 class="panel-title"> 
<a data-toggle="collapse" data-parent="#accordion" 
href="#collapseThree"> 
Click me to exapand. Click me again to collapse.Section 3 
</a> 
</n4> 
</div> 
<div id="collapseThree" class="panel-collapse collapse"> 
<div class="panel-body"> 
Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
vice lomo. 
</div> 
</div> 
</div> 
</div> 


1. data-toggle="collapse" is added to the link on which you click to expand or collapse the component. 
2. href or a data-target attribute is added to the parent component, whose value is id of the child component. 
3. 


data-parent attribute is added to is added for creating accordion like effect. 


Click me lo exapand. Click me again to collapse Section 1 


Click me to exapand. Click me again to collapse Section 2 


m keinen helvetica. craft beer labore wes anderson cred nesciunt sapiente ea 


proident. Ad vegan excepteur butcher vice loma 


Click me to exapand. Click me again to collapse Section 3 


e To create simple collapsible without the accordion markup: This can be created as in the sample 
example below: 


<button type="button" class="btn btn-primary" data-toggle="collapse" 
data-target="#demo"> 
simple collapsible 

</button> 


<div id="demo" class="collapse in"> 
Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
vice lomo. 

</div> 


As you can see in the example we have created a simple collapsible component, unlike accordion, we haven't 
added the attribute data-parent. 
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Usage 


Following table lists the classes collapse plugin utilizes to handle the heavy lifting: 


Class Description 

collapse hides the content 

.collapse.in shows the content 

.collapsing is added when the transition starts, and removed when it finishes 


You can use collapse plugin in two ways: 


e Via data attributes: Add data-toggle="collapse" and a data-target to the element to automatically assign 
control of a collapsible element. The data-target attribute will accept a CSS selector to apply the collapse to. 
Be sure to add the class .collapse to the collapsible element. If you'd like it to default open, include the 
additional class .in. 
To add accordion-like group management to a collapsible control, add the data attribute data- 
parent="#selector". 


e Via JavaScript: The collapse method can activated with JavaScript as below: 


S Jcolllapse") .colllapse() 


Options 


There are certain options which can be passed via data attributes or JavaScript are listed in the following table: 


: Data 
GE He pelau attribute Description 
name 
selector If selector then all collapsible elements under the specified parent will 
Parent data-parent be closed when this collapsible item is shown. (similar to traditional 


SE accordion behavior - this dependent on the accordion-group class) 


boolean 


Toggle Default: true 


data-toggle Toggles the collapsible element on invocation. 


Methods 


The following are some methods useful to use with collapsible elements. 


Method Description Example 

Activates your content as a Si(UPidentaticr™)i collapse ({ 
Options:.collapse(options) collapsible element. Accepts an toggle: false 

optional options object. I) 


TUTORIALS POINT 
Simply Easy Learning 


Toggles a collapsible element to 


Toggle:.collapse('toggle") shownior Bidder S("#identifier") .collapse ("toggle") 
Show:.collapse('show’) Shows a collapsible element. > (“Gudentifiexr') collapse ( show) 
Hide:.collapse('hide") Hides a collapsible element. Sebaa D Pollas (neet) 


EXAMPLE 


The following example demonstrates the usage of methods: 


<div class="panel-group" id="accordion"> 
<div class="panel panel-default"> 
<div class="panel-heading"> 
<h4 class="panel-title"> 
<a data-toggle="collapse" data-parent="#accordion" 
href="#collapseOne"> 
Click me to exapand. Click me again to collapse. 
Section 1--hide method 
</a> 
</h4> 
</div> 
<div id="collapseOne" class="panel-collapse collapse in"> 
<div class="panel-body"> 
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice 
lomo. 
</div> 
</div> 
Tav 
«div class-"panel panel-success"> 
<div class="panel-heading"> 
<h4 class="panel-title"> 
<a data-toggle="collapse" data-parent="#accordion" 
href="#collapseTwo"> 
Click me to exapand. Click me again to collapse. 
Section 2--show method 
</a> 
</n4> 
</div> 
<div id="collapseTwo" class="panel-collapse collapse"> 
<div class="panel-body"> 
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice 
lomo. 
</div> 
</div> 
</div> 
<div class="panel panel-info"> 
<div class="panel-heading"> 
<h4 class="panel-title"> 
<a data-toggle="collapse" data-parent="#accordion" 
href="#collapseThree"> 
Click me to exapand. Click me again to collapse. 
Section 3--toggle method 
</a> 
</n4> 
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</div> 
<div id="collapseThree" class="panel-collapse collapse"> 
<div class="panel-body"> 
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice 
lomo. 
</div> 
</div> 
</div> 
<div class="panel panel-warning"> 
<div class="panel-heading"> 
<h4 class="panel-title"> 
<a data-toggle="collapse" data-parent="#accordion" 
href="#collapseFour"> 
Click me to exapand. Click me again to collapse. 
Section 4--options method 
</a> 
</n4> 
</div> 
<div id="collapseFour" class="panel-collapse collapse"> 
<div class="panel-body"> 
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice 
lomo. 
</div> 
</div> 
</div> 
</div> 
<script type="text/javascript"> 
$(function () { $('#collapseFour').collapse ({ 
toggle: false 
22217 


$(function () ( $('4collapseTwo').collapse('show')]); 

$(function () ( $('4collapseThree').collapse('toggle')]); 

$ (function () ( $('4collapseOne').collapse('hide'))]); 
</script> 


Click me to exapand. Click me again to collapse.Section 1--hide method 
Click me to exapand. Click me again to collapse.Section 2--show method 


Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea 
proident. Ad vegan excepteur butcher vice lomo 


Click me to exapand. Click me again to collapse.Section 3--toggle method 


Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea 
proident. Ad vegan excepteur butcher vice lomo 


Click me to exapand. Click me again to collapse Section 4--options method 


EVENTS 


Following table lists few events for hooking into collapse functionality. 


Event Description Example 
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$('#identifier').on('show.bs.collapse', 
Fired after the show methodis function () { 
called. // do something... 

}) 


show.bs.collapse 


This event is fired when a 

collapse element has been 
shown.bs.collapse made visible to the user (will 

wait for CSS transitions to 


$('#identifier').on('shown.bs.collapse', 
function) 

AOS ome E 
}) 


complete). 
S('fidentifier').on('hide.bs.collapse', 
hide be collapse Fired when the hide instance itio. ( 4 
Miu H method has been called. // do something... 


}) 


This event is fired when a 
collapse element has been 

hidden.bs.collapse hidden from the user (will wait 
for CSS transitions to 
complete). 


$('fidentifier').on('hidden.bs.collapse', 
itae ( qd 

// do something... 
}) 


EXAMPLE 


The following example demonstrates the usage of events: 


<div class="panel-group" id="accordion"> 
<div class="panel panel-info"> 
<div class="panel-heading"> 
<h4 class="panel-title"> 
<a data-toggle="collapse" data-parent="#accordion" 
href="#collapseexample"> 
Click me to exapand. Click me again to collapse. 
Section --shown event 
</a> 
</n4> 
</div> 
<div id="collapseexample" class="panel-collapse collapse"> 
<div class="panel-body"> 
Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
cred nesciunt sapiente ea proident. 
Ad vegan excepteur butcher vice lomo. 
</div> 
</div> 
</div> 
</div> 


<script type="text/javascript"> 


S (function () 4 
S('fcollapseexample').on('show.bs.collapse', function () { 
alert ('Hey, this alert shows up when you expand it');}) 
)); 
</script> 
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Hey, this alert shows up when you expand it 
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Bootstrap Carousel Plugin 


he Bootstrap carousel is a flexible, responsive way to add a slider to your site. In addition to being 


responsive, the content is flexible enough to allow images, iframes, videos, or just about any type of content that 
you might want. 


If you want to include this plugin functionality individually, then you will need carousel.js. Else, as mentioned in the 
chapter Bootstrap Plugins Overview, you can include bootstrap.js or the minified bootstrap.min.js. 


Example 


A simple slideshow below shows a generic component for cycling through elements like a carousel, using the 
Bootstrap carousel plugin. To implement the carousel, you just need to add the code with the markup. There is no 
need for data attributes, just simple class-based development. 


<div id="myCarousel" class="carousel slide"> 
<l== Carousel indicators ==> 
<ol class="carousel-indicators"> 
<li data-target="#myCarousel" data-slide-to="0" class-"active"»«/li» 
<li data-target="#myCarousel" data-slide-to-"1"»«/li» 
«li data-target="#myCarousel" data-slide-to-"2"»«/li» 
</ol> 
<!-- Carousel items --> 
<div class="carousel-inner"> 
<div class="item active"> 
<img src="/bootstrap/images/slidel.png" alt="First slide"> 
</div> 
<div class="item"> 
<img src="/bootstrap/images/slide2.png" alt="Second slide"> 
</div> 
<div class="item"> 
<img src="/bootstrap/images/slide3.png" alt="Third slide"> 


Eu ke 
«/div» 
<!-- Carousel nav --> 


«a class="carousel-control left" href="#myCarousel" 
data-slide="prev">&lsaquo; </a> 
«a class="carousel-control right" href="#myCarousel" 
data-slide="next">&rsaquo; </a> 
</div> 
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OPTIONAL CAPTIONS 


You can add captions to your slides easily with the .carousel-caption element within any .item. Place just about 
any optional HTML within there and it will be automatically aligned and formatted. Following example demonstrates 
this: 


<div id="myCarousel" class="carousel slide"> 
<l== Carousel indicators. ==> 
<ol class="carousel-indicators"> 
«li data-target="#myCarousel" data-slide-to="0" class-"active"»«/li» 
«li data-target="#myCarousel" data-slide-to-"1"»«/li» 
«li data-target="#myCarousel" data-slide-to-"2"»«/li» 
</ol> 
<!-- Carousel items --> 
<div class="carousel-inner"> 
<div class="item active"> 
<img src="/bootstrap/images/slidel.png" alt="First slide"> 
<div class="carousel-caption">This Caption 1</div> 
</div> 
<div class="item"> 
<img src="/bootstrap/images/slide2.png" alt="Second slide"> 
<div class="carousel-caption">This Caption 2</div> 
</div> 
<div class="item"> 
<img src="/bootstrap/images/slide3.png" alt="Third slide"> 
<div class="carousel-caption">This Caption 3</div> 


S dau 
</div> 
<!-- Carousel nav ==> 


<a class="carousel-control left" href="#myCarousel" 
data-slide="prev">&lsaquo; </a> 
<a class="carousel-control right" href="#myCarousel" 
data-slide="next">&rsaquo; </a> 
</div> 
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Usage 


e Via data attributes: Use data attributes to easily control the position of the carousel. 


o Attribute data-slide accepts the keywords prev or next, which alters the slide position relative to its 
current position. 

o Use data-slide-to to pass a raw slide index to the carousel data-slide-to="2", which shifts the slide 
position to a particular index beginning with O. 

o The data-ridez"carousel" attribute is used to mark a carousel as animating starting at page load. 


e Via JavaScript: The carousel can be manually called with JavaScript as below: 
S(,carousel')  caxrousel () 
Options 
There are certain options which can be passed via data attributes or JavaScript are listed in the following table: 


Option Type/Default Data attribute 


Name Value name Description 
number F The amount of time to delay between automatically cycling an 
DS Default: 5000 eise memet item. If false, carousel will not automatically cycle. 

string x Pauses the cycling of the carousel on mouseenter and resumes 
paros Default: "hover" gaia pause the cycling of the carousel on mouseleave. 
wrap boolean data-wrap Whether the carousel should cycle continuously or have hard 


Default: true stops. 


Methods 


The following are some methods useful to use with carousel code. 


Method Description Example 
Initializes the carousel with an optional SES Ss 

.carousel(options) options object and starts cycling through $ ("Hidentifier').carousel ({ 
items. interval: 2000 
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Cycles through the carousel items from left 


.carousel('cycle") $('fidentifier').carousel('cycle') 


to right. 
.carousel('pause") EE $('#identifier')..carousel('pause') 
.carousel(number) ea pcc e frame (0 $('#identifier') .carousel (number) 
.carousel('prev') Cycles to the previous item. S('#identifier") .carousel ("prev") 
.carousel(‘next') Cycles to the next item.. $('#identifier') .carousel ('next') 


EXAMPLE 


The following example demonstrates the usage of methods: 


<div id="myCarousel" class="carousel slide"> 
<!== Carousel indicators ==> 
<ol class="carousel-indicators"> 
<li data-target="#myCarousel" data-slide-to="0" 
class-"active"»«/li» 
<li data-target="#myCarousel" data-slide-to-"1"»«/li» 
<li data-target="#myCarousel" data-slide-to-"2"»«/li» 
</ol> 
<!-- Carousel items --> 
<div class="carousel-inner"> 
<div class="item active"> 
<img src="/bootstrap/images/slidel.png" alt="First slide"> 
</div> 
<div class="item"> 
<img src="/bootstrap/images/slide2.png" alt="Second slide"> 
</div> 
<div class="item"> 
<img src="/bootstrap/images/slide3.png" alt="Third slide"> 


</div> 
</div> 
<!-- Carousel nav --> 


<a class="carousel-control left" href="#myCarousel" 
data-slide="prev">é&lsaquo; </a> 

<a class="carousel-control right" href="#myCarousel" 
data-slide="next">&rsaquo; </a> 


<== Controls buttons: ==> 
<div style="text-align:center;"> 
<input type="button" class="btn start-slide" value="Start"> 
<input type="button" class="btn pause-slide" value="Pause"> 
<input type="button" class="btn prev-slide" value="Previous Slide"> 
<input type="button" class="btn next-slide" value="Next Slide"> 
<input type="button" class="btn slide-one" value="Slide 1"> 
<input type="button" class="btn slide-two" value="Slide 2"> 
<input type="button" class="btn slide-three" value="Slide 3"> 
</div> 


</div> 
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<script> 
$ (function()( 
// Initializes the carousel 
S(".start-slide").click(function () { 
$ ("#myCarousel") .carousel ('cycle'); 
II: 
// Stops the carousel 
$(",pause-slide") .click (function () { 
$ ("#myCarousel") .carousel ('pause'); 
)); 
// Cycles to the previous item 
$(".prev-slide").click(function()( 
$ ("#myCarousel") .carousel ('prev'); 
)); 
// Cycles to the next item 
$(".next-slide").click(function()( 
$ ("#myCarousel") .carousel ('next'); 
)); 
// Cycles the carousel to a particular frame 
$(".slide-one").click(function()( 
$ ("#myCarousel") .carousel (0); 
II: 
$(".slide-two").click(function()( 
$ ("fmyCarousel").carousel (1); 
)); 
$(".slide-three").click(function()( 
$ ("#myCarousel") .carousel (2); 
)); 
DE 
«script 


Start | Pause Previous Slide NexiSlide — Slide! Side2 Slide 3 


Events 


Bootstrap's carousel class exposes two events for hooking into carousel functionality which are listed in the 
following table. 


Event Description Example 
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S('fidentifier').on('slide.bs.carousel', 
sucio (Or 4 
// do something... 


This event fires immediately 
slide.bs.carousel when the slide instance method 


is invoked.. y) 


S('fidentifier').on('slid.bs.carousel', 
ENCER (0) 4 
// do something.. 


This event is fired when the 
slid.bs.carousel carousel has completed its slide 


transition. x 


EXAMPLE 


The following example demonstrates the usage of events: 


<div id="myCarousel" class="carousel slide"> 
<l== Carousel indicators ==> 
<ol class="carousel-indicators"> 
<li data-target="#myCarousel" data-slide-to="0" 
class-"active"»«/li» 
<li data-target="#myCarousel" data-slide-to-"1"»«/li» 
<li data-target="#myCarousel" data-slide-to-"2"»«/li» 
</ol> 
<!-- Carousel items --> 
<div class="carousel-inner"> 
<div class="item active"> 
<img src="/bootstrap/images/slidel.png" alt="First slide"> 
</div> 
<div class="item"> 
<img src="/bootstrap/images/slide2.png" alt="Second slide"> 
</div> 
<div class="item"> 
<img src="/bootstrap/images/slide3.png" alt="Third slide"> 


</div> 
S gays 
«lee Carousel nav ==> 


«a class="carousel-control left" href="#myCarousel" 
data-slide="prev">8lsaquo;</a> 

«a class="carousel-control right" href="#myCarousel" 
data-slide="next">é&rsaquo; </a> 


</div> 
«Script 
S (function () { 
$('4myCarousel').on('slide.bs.carousel', function () { 
alert ("This event fires immediately when the slide instance method" 
+"is invoked."); 
)33 
)); 
</script> 
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This event fires immediately when the slide instance method is invoked 
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Bootstrap Affix Plugin 


he affix plugin allows a <div> to become affixed to a location on the page. You can also toggle it's pinning 


on and off using this plugin. A common example of this is social icons. They will start in a location, but as the page 
hits a certain mark, the <div> will become locked in place and will stop scrolling with the rest of the page. 


If you want to include this plugin functionality individually, then you will need affix.js. Else, as mentioned in the 
chapter Bootstrap Plugins Overview, you can include bootstrap.js or the minified bootstrap.min.js. 


USAGE 


You can use the affix plugin via data attributes or manually with your own JavaScript as discussed below. 


e Via data attributes: To easily add affix behavior to any element, just add data-spy="affix" to the element you 
want to spy on. Use offsets to define when to toggle the pinning of an element. 


EXAMPLE 


The following example demonstrates the usage through data attributes: 


<div class="container"> 
«div class-"jumbotron"» 
<hl>Bootstrap Affix Plugin example</h1> 
«/div» 
<div id-"myNav"  data-spy-"affix" data-offset-top-"60" 
data-offset-bottom-"200"» 
<div class="col-md-3"> 
<ul class="nav nav-tabs nav-stacked affix" data-spy="affix" 
data-offset-top-"190"» 
<li class-"active"»«a href="#one">Tutorial One</a></1li> 
<li><a href="#two">Tutorial Two</a></li> 
<li><a href="#three">Tutorial Three«/a»«/li» 
SE 
</div> 
<div class="col-md-9"> 
<h2 id="one">Tutorial One</h2> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Nam eu sem tempor, varius quam at, luctus dui. Mauris magna 
metus, dapibus nec turpis vel, semper malesuada ante. 
Vestibulum id metus ac nisl bibendum scelerisque non non 
purus. Suspendisse varius nibh non aliquet sagittis. In 
tincidunt orci sit amet elementum vestibulum. Vivamus 
fermentum in arcu in aliquam. Quisque aliquam porta odio 
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in fringilla. Vivamus nisl leo, blandit at bibendum eu, 
tristique eget risus. Integer aliquet quam ut elit suscipit, 
id interdum neque porttitor. Integer 

faucibus ligula.</p> 

<p>Vestibulum quis quam ut magna consequat faucibus. 
Pellentesqu get nisi a mi suscipit tincidunt. Ut tempus 
dictum risus. Pellentesque viverra sagittis quam at mattis. 
Suspendisse potenti. Aliquam sit amet gravida nibh, 
facilisis gravida odio. Phasellus auctor velit at lacus 
blandit, commodo iaculis justo viverra. Etiam vitae est 
arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce 
quam tortor, commodo ac dui quis, bibendum viverra erat. 
Maecenas mattis lectus enim, quis tincidunt dui molestie 
euismod. Curabitur et diam tristique, accumsan nunc eu, 
hendrerit tellus.</p> 

<hr> 
<h2 id="two">Tutorial Two</h2> 

<p> Nullam hendrerit justo non leo aliquet imperdiet. Etiam 

in sagittis lectus. Suspendisse ultrices placerat accumsan. 
Mauris quis dapibus orci. In dapibus velit blandit pharetra 
tincidunt. Quisque non sapien nec lacus condimentum facilisis 
ut iaculis enim. Sed viverra interdum bibendum. Donec ac 
sollicitudin dolor. Sed fringilla vitae lacus at rutrum. 
Phasellus congue vestibulum ligula sed consequat.</p> 
<p>Vestibulum consectetur scelerisque lacus, ac fermentum 
lorem convallis sed. Nam odio tortor, dictum quis malesuada at, 
pellentesque vitae orci. Vivamus elementum, felis eu auctor 
lobortis, diam velit egestas lacus, quis fermentum metus ante 
quis urna. Sed at facilisis libero. Cum sociis natoque 
penatibus et magnis dis parturient montes, nascetur ridiculus 
mus. Vestibulum bibendum blandit dolor. Nunc orci dolor, 
molestie nec nibh in, hendrerit tincidunt ante. Vivamus sem 
augue, hendrerit non sapien in, mollis ornare augue.</p> 

<hr> 

<h2 id="three">Tutorial Three</h2> 

<p>Integer pulvinar leo id risus pellentesque vestibulum. 

Sed diam libero, sodales eget sapien vel, porttitor bibendum 
enim. Donec sed nibh vitae lorem porttitor blandit in nec ante. 
Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem 
malesuada condimentum. Etiam in aliquam lectus. Nam vel sapien 
diam. Donec pharetra id arcu eget blandit. Proin imperdiet 
mattis augue in porttitor. Quisque tempus enim id lobortis 
feugiat. Suspendisse tincidunt risus quis dolor fringilla 
blandit. Ut sed sapien at purus lacinia porttitor. Nullam 
iaculis, felis a pretium ornare, dolor nisl semper tortor, vel 
sagittis lacus est consequat eros. Sed id pretium nisl. 
Curabitur dolor nisl, laoreet vitae aliquam id, tincidunt sit 
amet mauris. </p> 

<p>Phasellus vitae suscipit justo. Mauris pharetra feugiat 
ante id lacinia. Etiam faucibus mauris id tempor egestas. Duis 
luctus turpis at accumsan tincidunt. Phasellus risus risus, 
volutpat vel tellus ac, tincidunt fringilla massa. Etiam 
hendrerit dolor eget ante rutrum adipiscing. Cras interdum 
ipsum mattis, tempus mauris vel, semper ipsum. Duis sed dolor 
ut enim lobortis pellentesque ultricies ac ligula. Pellentesque 
convallis elit nisi, id vulputate ipsum ullamcorper ut. Cras 
ac pulvinar purus, ac viverra est. Suspendisse potenti. Integer 
pellentesque nequ t elementum tempus. Curabitur bibendum in 
ligula ut rhoncus.</p> 

<p>Quisque pharetra velit id velit iaculis pretium. Nullam a 
justo sed ligula porta semper eu quis enim. Pellentesqu 
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pellentesque, metus at facilisis hendrerit, lectus velit 
facilisis leo, quis volutpat turpis arcu quis enim. Nulla 
viverra lorem elementum interdum ultricies. Suspendisse 
accumsan quam nec ante mollis tempus. Morbi vel accumsan diam, 
eget convallis tellus. Suspendisse potenti.</p> 
</div> 
</div> 
</div> 


Bootstrap Affix Plugin example 


Tutorial One 


Lorem ipeum dolor sit amel. consectetur adipiscing et Nam eu sem tempor. vanes quam al. luctus dui Mauris magna mets 
dapibus nec turpis vel. semper maesuada arte. Vestibulum «i metus ac msi bibendum scelerisque non non purus. Suspendisse 
vanus nibh non aliquet sagts. in tincidunt orci st amet elementum vestibulum. Vivamus fermentum in arcu in a iquam. Quisque 
abguar porta odo in fringila. Vwamus nisl loo. Marat al bibendum eu. tristque eget risus. Ineger abquel quam ut eh susopt, id 
interdum neque portitor Integer faucibus iguh. 


Vestibulum quis quam ul magna consequat faucibus. Pellentesque eget mel a mi suscipi tincidunt. Ut tempus dictum risus 
Pefertesque viverra sagittis quam al maltis. Suspendisse potent. Aliquam sf amet gravida nibh. lacksis gravida odio. Phaselus 
auctor «elt it lacus blandit. commodo ab justo viverra, Pian vitae est arcu. Maurie vel congue dolor. Alquam eget mi mi 
Fusce quam tortor, commodo ac du quis, bibendum viveerns eral. Maecenas ratte lechut en, qui rod! dui maese 
eusmod Curabtur et dam tristique, accumsan nunc eu, hendrerit tels 


Tutorial Two 


Nullam hendrerit justo non io aliquel imperdet Etiam in sagittis lectus. Suspendase Viren placera! ccumsan: Mauris quis 
capis ora. in dapibus velt di pharetr modom. Quisque ron sapien cec lacus condimentum facésa ut ao enm Sed 
vwerra ntecdum bibendum. Donec ac sohctudie dolor. Sed fngfa wine lacus at rutrum. Phaselus congue vestibulum tguta sed 


e Via JavaScript: You can affix an element manually with JavaScript as below: 


$('tmyAffix').affix(( 
offset: { 
top: 100, bottom: function () { 
return (this.bottom = 
$('.bs-footer').outerHeight (true)) 


}) 


EXAMPLE 
The following example demonstrates the usage through data attributes: 


<div class="container"> 
«div class-"jumbotron"» 
<hl>Bootstrap Affix Plugin example</h1> 
«/div» 
«div» 
<div class="col-md-3"> 
<ul class="nav nav-tabs nav-stacked affix" id="myNav"> 
<li class-"active"»«a href="#one">Tutorial One«/a»«/li» 
<li><a href="#two">Tutorial Two</a></li> 
<li><a href="#three">Tutorial Three«/a»«/li» 
SL 
</div> 
«div class="col=md=9"> 
<h2 id="one">Tutorial One</h2> 
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<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Nam eu sem tempor, varius quam at, luctus dui. Mauris magna 
metus, dapibus nec turpis vel, semper malesuada ante. 
Vestibulum id metus ac nisl bibendum scelerisque non non 
purus. Suspendisse varius nibh non aliquet sagittis. In 
tincidunt orci sit amet elementum vestibulum. Vivamus 
fermentum in arcu in aliquam. Quisque aliquam porta odio 

in fringilla. Vivamus nisl leo, blandit at bibendum eu, 
tristique eget risus. Integer aliquet quam ut elit suscipit, 
id interdum neque porttitor. Integer 

faucibus ligula.</p> 

<p>Vestibulum quis quam ut magna consequat faucibus. 
Pellentesqu get nisi a mi suscipit tincidunt. Ut tempus 
dictum risus. Pellentesque viverra sagittis quam at mattis. 
Suspendisse potenti. Aliquam sit amet gravida nibh, 
facilisis gravida odio. Phasellus auctor velit at lacus 
blandit, commodo iaculis justo viverra. Etiam vitae est 
arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce 
quam tortor, commodo ac dui quis, bibendum viverra erat. 
Maecenas mattis lectus enim, quis tincidunt dui molestie 
euismod. Curabitur et diam tristique, accumsan nunc eu, 
hendrerit tellus.</p> 

<hr> 
<h2 id="two">Tutorial Two</h2> 

<p> Nullam hendrerit justo non leo aliquet imperdiet. Etiam 

in sagittis lectus. Suspendisse ultrices placerat accumsan. 
Mauris quis dapibus orci. In dapibus velit blandit pharetra 
tincidunt. Quisque non sapien nec lacus condimentum facilisis 
ut iaculis enim. Sed viverra interdum bibendum. Donec ac 
sollicitudin dolor. Sed fringilla vitae lacus at rutrum. 
Phasellus congue vestibulum ligula sed consequat.</p> 
<p>Vestibulum consectetur scelerisque lacus, ac fermentum 
lorem convallis sed. Nam odio tortor, dictum quis malesuada at, 
pellentesque vitae orci. Vivamus elementum, felis eu auctor 
lobortis, diam velit egestas lacus, quis fermentum metus ante 
quis urna. Sed at facilisis libero. Cum sociis natoque 
penatibus et magnis dis parturient montes, nascetur ridiculus 
mus. Vestibulum bibendum blandit dolor. Nunc orci dolor, 
molestie nec nibh in, hendrerit tincidunt ante. Vivamus sem 
augue, hendrerit non sapien in, mollis ornare augue.</p> 

SES 

<h2 id="three">Tutorial Three</h2> 

<p>Integer pulvinar leo id risus pellentesque vestibulum. 

Sed diam libero, sodales eget sapien vel, porttitor bibendum 
enim. Donec sed nibh vitae lorem porttitor blandit in nec ante. 
Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem 
malesuada condimentum. Etiam in aliquam lectus. Nam vel sapien 
diam. Donec pharetra id arcu eget blandit. Proin imperdiet 
mattis augue in porttitor. Quisque tempus enim id lobortis 
feugiat. Suspendisse tincidunt risus quis dolor fringilla 
blandit. Ut sed sapien at purus lacinia porttitor. Nullam 
laculis, felis a pretium ornare, dolor nisl semper tortor, vel 
sagittis lacus est consequat eros. Sed id pretium nisl. 
Curabitur dolor nisl, laoreet vitae aliquam id, tincidunt sit 
amet mauris. </p> 

<p>Phasellus vitae suscipit justo. Mauris pharetra feugiat 
ante id lacinia. Etiam faucibus mauris id tempor egestas. Duis 
luctus turpis at accumsan tincidunt. Phasellus risus risus, 
volutpat vel tellus ac, tincidunt fringilla massa. Etiam 
hendrerit dolor eget ante rutrum adipiscing. Cras interdum 
ipsum mattis, tempus mauris vel, semper ipsum. Duis sed dolor 
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ut enim lobortis pellentesque ultricies ac ligula. Pellentesque 
convallis elit nisi, id vulputate ipsum ullamcorper ut. Cras 
ac pulvinar purus, ac viverra est. Suspendisse potenti. Integer 
pellentesque nequ t elementum tempus. Curabitur bibendum in 
ligula ut rhoncus.</p> 

<p>Quisque pharetra velit id velit iaculis pretium. Nullam a 
justo sed ligula porta semper eu quis enim. Pellentesqu 
pellentesque, metus at facilisis hendrerit, lectus velit 
facilisis leo, quis volutpat turpis arcu quis enim. Nulla 
viverra lorem elementum interdum ultricies. Suspendisse 
accumsan quam nec ante mollis tempus. Morbi vel accumsan diam, 
eget convallis tellus. Suspendisse potenti.</p> 


</div> 
</div> 
</div> 
<script type="text/javascript"> 
S(functron () 4 
$ ('"HmyNav') .affix(( 
offset: { 
top: 60 
} 
)); 
)); 
</ sorlrpb 


Positioning via CSS 


Bootstrap Affix Plugin example 


Tutorial One 


ipeum dolor si amel 


Tutorial Two 


Nullam heróreri ni wo abquel impeedet Fam in sagittis lex Suspéndese ulrices placeral accumsan: Mauris que 


dapi n dapibus velt dandi ph 


era interdum bibendum. Donec ac so 


In both the above situations, you must provide CSS for the positioning of your content. The affix plugin toggles 
between three classes, each representing a particular state: .affix, .affix-top, and .affix-bottom. Follow the below 
steps to set your CSS for either of the above usage options. 


To start, the plugin adds .affix-top to indicate the element is in it's top-most position. At this point no CSS 
positioning is required. 

Scrolling past the element you want affixed should trigger the actual affixing. This is 
where .affixreplaces .affix-top and sets position: fixed; (provided by Bootstrap's code CSS). 

If a bottom offset is defined, scrolling past that should replace .affix with .affix-bottom. Since offsets are 
optional, setting one requires you to set the appropriate CSS. In this case, addposition: absolute; when 
necessary. 
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Options 


There are certain options which can be passed via data attributes or JavaScript are listed in the following table: 


- Data 
NOE ded "eh attribute Description 
name 
Pixels to offset from screen when calculating position of scroll. If a single 
number | number is provided, the offset will be applied in both top and bottom 
offset function | object  data-offset | directions. To provide a unique, bottom and top offset just provide an 
Default: 10 object offset: ( top: 10 } or offset: { top: 10, bottom: 5 ). Use a function 


when you need to dynamically calculate an offset. 
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